Thiết kế một trang web theo đúng cách bạn muốn thường đòi hỏi phải cắt bỏ phần thừa – một số khoảng trắng ở đây, gạch dưới ở đó hoặc, trong trường hợp ngày nay là scrollbar.
Cho dù vì lý do thiết kế hay chức năng, bạn có thể dễ dàng ẩn scrollbar trên một trang hoặc phần tử trang bằng một chút CSS. Có nhiều cách để thực hiện việc này – ẩn scrollbar trong khi cho phép scroll, ẩn thanh trong khi tắt scroll và chỉ ẩn scrollbar cho đến khi cần – một số cách trong số đó sẽ hoạt động tốt hơn dựa trên trường hợp của bạn.
Xem thêm Selenium IDE- xác định phần tử html cho testing website
Để đáp ứng nhu cầu thiết kế của bạn, hướng dẫn này sẽ bao gồm tất cả các phương pháp này. Bắt đầu nào.
Cách ẩn thanh Scrollbar trong CSS (nhưng cho phép scroll)
Không có một quy tắc CSS chuyên dụng nào để ẩn scrollbar trong khi vẫn giữ khả năng scroll xuống một trang / phần tử. Tuy nhiên, điều này có thể thực hiện được với một số quy tắc CSS dành riêng cho trình duyệt. Để ẩn scrollbar và giữ chức năng scroll, hãy áp dụng CSS sau vào phần nội dung (cho toàn bộ trang) hoặc một phần tử cụ thể.
/* css ẩn scrollbar */
element {
-ms-overflow-style: none; /* khai báo sử dụng Internet Explorer, Edge */
scrollbar-width: none; /* sử dụng Firefox */
overflow-y: scroll;
}
element::-webkit-scrollbar {
display: none; /* cho Chrome, Safari, and Opera */
}… trong đó phần tử là bộ chọn bạn muốn nhắm mục tiêu. Đây là mã này trông như thế nào khi được áp dụng cho toàn bộ trang:
/* hide scrollbar nhưng vẫn cho phép scrollinh */
body {
-ms-overflow-style: none; /* cho Internet Explorer, Edge */
scrollbar-width: none; /* cho Firefox */
overflow-y: scroll;
}
body::-webkit-scrollbar {
display: none; /* cho Chrome, Safari, and Opera */
}
/* định dạng khác */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}Và đây là mã tương tự được áp dụng cho phần tử <div>:
/* hide scrollbar nhưng vẫn cho phép scrolling */
div {
-ms-overflow-style: none; /* cho Internet Explorer, Edge */
scrollbar-width: none; /* cho Firefox */
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none; /* cho Chrome, Safari, and Opera */
}
/* other styling */
div {
border: solid 5px black;
border-radius: 5px;
height: 300px;
padding: 10px;
width: 200px;
}
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}Thông thường scrollbar sẽ xuất hiện trong cả hai trường hợp này, nhưng các quy tắc css của chúng tôi ngăn điều này xảy ra trên các trình duyệt web phổ biến.
Xem thêm Scrollbar( thanh cuộn) trong CSS
Cách ẩn Scrollbar trong CSS (và không cho phép Scrolling)
Để ẩn scrollbar và tắt tính năng scroll, chúng ta có thể sử dụng thuộc tính overflow CSS. Thuộc tính này xác định phải làm gì với nội dung vượt ra ngoài ranh giới của vùng chứa.
/* hide scrollbar and prevent scrolling */
#div-1 { overflow: hidden; }
#div-2 { overflow: visible; }
/* other styling */
div {
border: solid 5px black;
border-radius: 5px;
height: 100px;
margin: 20px;
width: 300px;
}
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
}Để ngăn việc scroll với thuộc tính này, chỉ cần áp dụng quy tắc overflow: hidden đối với nội dung (cho toàn bộ trang) hoặc một phần tử vùng chứa. Điều này ẩn tất cả nội dung bên ngoài biên giới của phần tử. Ngoài ra, sử dụng overflow: visible để hiển thị nội dung vượt ra ngoài biên giới của vùng chứa.
Điều này vô hiệu hóa cả scroll dọc và ngang. Như chúng ta sẽ thấy tiếp theo, bạn cũng có thể vô hiệu hóa chỉ scroll ngang hoặc chỉ scroll dọc.
Xem thêm Các tính năng ẩn của Yoast SEO
Cách ẩn scrollbar dọc trong CSS
Để ẩn scrollbar dọc và ngăn scroll dọc, hãy sử dụng overflow-y như sau:
/* hide vertical scrollbar cấm không sử dụng scrolling */
div {
overflow-y: hidden;
/* other styling */
border: solid 5px black;
border-radius: 5px;
height: 300px;
width: 300px;
}
img { height: 500px; }
/* other styling */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
}Cách ẩn scrollbar ngang trong CSS
Vì scroll ngang nói chung là một ý tưởng tồi, quy tắc này có thể hữu ích. Để ẩn scrollbar ngang và ngăn scroll ngang, hãy sử dụng overflow-x: hidden
/* hide vertical scrollbar và cấm ko cho sử dụng scrolling */
div {
overflow-x: hidden;
/* other styling */
border: solid 5px black;
border-radius: 5px;
height: 300px;
width: 300px;
}
img { height: 500px; }
/* other styling */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
}Cách ẩn scrollbar cho đến khi cần thiết
Ẩn scrollbar có thể hỗ trợ thiết kế của bạn trong một số trường hợp. Nhưng ở những người khác, việc xóa phần này của trang thực sự có thể gây hại cho trải nghiệm người dùng.
/* hide scrollbar nhưng vẫn cho phép scrolling */
body { overflow: auto; }
/* other styling */
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}Hầu hết khách truy cập liên kết hoạt động scroll với một scrollbar có thể nhìn thấy. Vì vậy, nếu bạn áp dụng phương pháp này cho toàn bộ trang, nó có vẻ lạ đối với một số người. Ngoài ra, scrollbar cho chúng ta biết lượng trang chúng ta còn lại để xem (trừ khi thực hiện scroll vô hạn). Trừ khi bạn có một số chỉ báo trực quan khác cho thấy rằng có nhiều nội dung hơn để xem, việc thiếu scrollbar có thể gây khó chịu.
Thử nghiệm của người dùng có thể làm rõ scrollbar bị thiếu tác động như thế nào đến trải nghiệm người dùng trên trang web của bạn, nhưng một giải pháp tốt trong nhiều trường hợp là ẩn scrollbar cho đến khi người dùng bắt đầu scroll. Để bật tính năng này trong CSS, hãy sử dụng quy tắc tràn: tự động.
Xem thêm CSS là gì? cách hoạt động và cách học CSS
Ẩn scrollbar bằng CSS
Cho dù bạn đang xây dựng một trang bằng CSS thuần túy hay một khuôn khổ như Bootstrap, chỉ cần một vài quy tắc để ẩn scrollbar khỏi trang của bạn.
Tuy nhiên, hãy nhớ rằng chỉ vì bạn có thể, không có nghĩa là bạn nên làm như vậy. Đối với nhiều người dùng, scrollbar là một gợi ý trực quan tiện dụng hỗ trợ điều hướng. Nếu bạn định xóa nó, hãy nhớ làm điều này một cách có chủ ý và theo cách hỗ trợ thiết kế của bạn.
