Ẩn thanh cuộn CSS

Khách hàng muốn có một trang chủ rất phức tạp và đậm chất điện ảnh. Tuy nhiên, thanh cuộn của trình duyệt gây ra hiệu ứng thay đổi kích thước rất xấu trên cửa sổ trình duyệt

Cùng với nhà thiết kế UI/UX, chúng tôi đã kết luận rằng cách duy nhất để làm cho nó trông đẹp mắt là ẩn hoàn toàn thanh cuộn
Thật không may, nói dễ hơn làm

Tôi đã tìm kiếm hàng giờ trên Google để thử tất cả các loại giải pháp trên web khi cuối cùng tôi cũng tìm thấy sự kết hợp phù hợp và điều kỳ diệu là nó đã hoạt động
Điều tuyệt vời nhất là chỉ với một vài dòng CSS, thanh cuộn đã biến mất hoàn toàn và người dùng vẫn có thể điều hướng trang

Được rồi, không nói nữa. Đây là đoạn mã

html {
    scrollbar-width: none;  /* Firefox */
}body {
    -ms-overflow-style: none;  /* IE and Edge */
}body::-webkit-scrollbar { 
    display: none; /* Chrome, Safari, Opera */ 
}

Hết lần này đến lần khác. Hẹn gặp lại các bạn lần sau để biết các mẹo nhanh và thủ thuật đơn giản khác để giải quyết lỗi mà không uống quá nhiều caffein ☕️

Nếu bạn không biết cách ẩn thanh cuộn cho các trình duyệt chính bằng CSS thuần túy, thì bạn đang ở đúng nơi

Ẩn thanh cuộn rất hữu ích khi toàn bộ nội dung hiển thị. Để ẩn thanh cuộn khỏi bất kỳ thành phần nào, bạn có thể sử dụng mã CSS

Trong đoạn mã này, chúng tôi sẽ trình bày cách xóa thanh cuộn khỏi

Và

Thuộc tính “overflow-y” chỉ định điều gì sẽ xảy ra nếu nội dung không vừa với vùng chứa theo chiều cao. Nó cũng được sử dụng để hiển thị nội dung tràn của phần tử cấp khối và để thêm hoặc tắt thanh cuộn

Vì vậy, hãy lấy một ví dụ để kiểm tra quy trình tắt thanh cuộn dọc với sự trợ giúp của thuộc tính CSS tràn-y

Thí dụ

Đối với trang HTML của chúng tôi, chúng tôi sẽ tắt thanh cuộn dọc hiện ở bên phải

Place the desired HTML elements, as in our case, we will add a heading in the “” tag of the HTML file:

< h1 > Vô hiệu hóa thanh cuộn h1>

Để ẩn thanh cuộn dọc, hãy đặt thuộc tính “overflow-y” thành “hidden”. Chiều cao và chiều rộng của “200%” sẽ được sử dụng để làm cho trang dài hơn và rộng hơn. Đây là cách chúng tôi cố tình lấy các thanh cuộn trên trang của chúng tôi

>>

body {

chiều cao. 200%;

chiều rộng. 200%;

tràn-y. ẩn;

}

>>

Lưu mã được cung cấp và chạy tệp HTML của bạn trong trình duyệt

Như bạn có thể thấy, chúng tôi đã vô hiệu hóa thành công thanh cuộn dọc bằng cách sử dụng thuộc tính CSS overflow-y

Phương pháp 2. Sử dụng thuộc tính overflow-x để vô hiệu hóa Thanh cuộn ngang trong CSS

Khi nội dung không vừa với vùng chứa theo chiều rộng, thuộc tính “overflow-x” được sử dụng để quản lý các tình huống đó. Nó đặt nội dung hiển thị khi nội dung được thêm vào tràn qua cạnh phải và trái của phần tử cấp khối. Thuộc tính CSS này cũng có thể được sử dụng để tắt thanh cuộn ngang

Thí dụ

Bây giờ chúng ta sẽ vô hiệu hóa thanh cuộn ngang được đánh dấu bên dưới của trang HTML của chúng ta

Để ẩn thanh cuộn ngang, hãy đặt “overflow-x thành “hidden” và thêm giá trị của thuộc tính chiều cao và chiều rộng như đã nêu trong ví dụ trước

>>

body {

chiều cao. 200%;

chiều rộng. 200%;

overflow-x. ẩn;

}

>>

đầu ra

Bạn muốn tắt cả thanh ngang và thanh dọc cùng một lúc?

Phương pháp 3. Sử dụng thuộc tính tràn để vô hiệu hóa thanh cuộn dọc và ngang trong CSS

Khi nội dung không vừa với vùng chứa theo chiều ngang cũng như chiều dọc, thuộc tính “tràn” chỉ định thêm thanh cuộn hay cắt bớt nội dung. Bạn cũng có thể sử dụng thuộc tính CSS này để tắt đồng thời các thanh cuộn dọc và ngang

Thí dụ

Trong cùng một tệp HTML, chúng tôi sẽ thêm thuộc tính "tràn" và gán cho nó một giá trị "ẩn". Điều này sẽ vô hiệu hóa thanh cuộn cho cả hai vị trí, theo chiều ngang và chiều dọc

>>

body {

chiều cao. 200%;

chiều rộng. 200%;

tràn. ẩn;

}

>>

đầu ra

Chúng tôi đã cung cấp hướng dẫn về cách tắt thanh cuộn bằng các thuộc tính CSS khác nhau

Phần kết luận

Để tắt các thanh cuộn trong CSS, bạn có thể sử dụng các thuộc tính “overflow-x”, “overflow-y” và “overflow”. Thuộc tính tràn-x được sử dụng cụ thể để vô hiệu hóa thanh cuộn dọc và thuộc tính tràn-y để vô hiệu hóa thanh cuộn ngang. Hơn nữa, thuộc tính tràn hỗ trợ vô hiệu hóa các thanh dọc và ngang cùng một lúc. Bài viết này đã thảo luận về các phương pháp để tắt thanh cuộn trong CSS