Ketika Anda membuat sebuah layout web dengan HTML dan CSS, terkadang Anda menjumpai masalah seperti munculnya scrollbar secara horizontal di halaman web yg Anda buat. Padahal Anda sendiri tidak bermaksud dan tidak menginginkan munculnya scrollbar horizontal tersebut. Ini mungkin dikarenakan adanya kesalahan pada kode HTML atau CSS Anda. Namun Anda tidak memiliki cukup waktu untuk mencari kesalahan tersebut. Untuk itu disini saya share untuk menghilangkan scrollbar tersebut secara paksa dengan CSS, agar pekerjaan Anda dapat terselesaikan secara lebih cepat.
Untuk menghilangkan scrollbar horizontal yg mengganggu secara paksa dengan CSS, adalah dengan cara meng-set overflow horizontal halaman Anda menjadi hidden serta membatasi maximal lebar dari halaman Anda tidak boleh lebih dari 100%.
Source Code Lengkap
Preview di CodePEN|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Disabled Horizontal Scrollbar</title>
<style>
/* Disabled Horizontal Scroll */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* End Disabled Horizontal Scroll */
.long-text {
width: 150%;
}
</style>
</head>
<body>
<div class="long-text">
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
Long text will make this window showing horizontal scrollbar.
</div>
</body>
</html>
|
No comments:
Post a Comment