Cách ẩn thanh cuộn trong CSS – css ẩn thanh cuộn nhưng cho phép cuộn

Tìm hiểu cách ẩn thanh cuộn trong CSS, cùng với cách tắt cuộn hoặc tiếp tục bật cuộn trên trang web của bạn.

Bạn đang xem : css ẩn thanh cuộn nhưng cho phép cuộn

Thiết kế trang web theo đúng cách bạn muốn thường đòi hỏi phải cắt thừa ra – một số khoảng trắng ở đây, gạch dưới ở đó hoặc trong trường hợp ngày nay là thanh cuộn.

Cho dù vì lý do thiết kế hay chức năng, thật dễ dàng ẩn thanh cuộn 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 thanh cuộn trong khi cho phép cuộn, ẩn thanh cuộn trong khi tắt cuộn và chỉ ẩn thanh cuộn cho đến khi cần – một số cách trong số đó sẽ hoạt động tốt hơn tùy theo trường hợp của bạn.

Để đá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. Hãy bắt đầu.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Cách ẩn Thanh cuộn trong CSS (nhưng Cho phép cuộn)

Than ôi, không có quy tắc CSS chuyên dụng nào để ẩn thanh cuộn trong khi vẫn giữ khả năng cuộn 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 thanh cuộn và giữ chức năng cuộn, hãy áp dụng CSS sau đây cho phần nội dung (cho toàn bộ trang) hoặc một phần tử cụ thể.

  
/ * ẩn thanh cuộn nhưng cho phép cuộn * /
phần tử {
-ms-tràn-style: không ai; / * cho Internet Explorer, Edge * /
scrollbar-width: none; / * dành cho Firefox * /
tràn-y: scroll;
}

phần tử :: - webkit-scrollbar {
display: none; / * dành cho Chrome, Safari và 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:

Xem Bút Ẩn Thanh cuộn trong CSS nhưng Cho phép Cuộn (nội dung) của Christina Perricone ( @hubspot ) trên CodePen .

Và đây là mã tương tự được áp dụng cho phần tử & lt; div & gt; :

Xem Bút Ẩn Thanh cuộn trong CSS nhưng Cho phép Cuộn (div) của Christina Perricone ( @hubspot ) trên CodePen .

Xem Thêm  Hướng dẫn cơ bản về ràng buộc khóa ngoại trong SQL - ràng buộc khóa ngoại sql

Thông thường thanh cuộn sẽ xuất hiện trong cả hai trường hợp này, nhưng các quy tắc 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.

Cách ẩn thanh cuộn trong CSS (và ngăn cuộn)

Để ẩn thanh cuộn và tắt tính năng cuộn, chúng tôi có thể sử dụng thuộc tính bổ sung 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.

Để ngăn việc cuộn với thuộc tính này, chỉ cần áp dụng quy tắc tràn: ẩn cho phần nội dung (cho toàn bộ trang) hoặc 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, hãy sử dụng tràn: hiển thị để hiển thị nội dung vượt ra ngoài biên giới của vùng chứa.

Xem Bút ký Ẩn thanh cuộn trong CSS và Ngăn cuộn (tràn: ẩn) của Christina Perricone ( @hubspot ) trên CodePen .

Điều này vô hiệu hóa cả cuộn dọc và cuộn ngang. Như chúng ta sẽ thấy tiếp theo, bạn cũng có thể vô hiệu hóa chỉ cuộn ngang hoặc chỉ cuộn dọc.

Cách ẩn thanh cuộn dọc trong CSS

Để ẩn thanh cuộn dọc và ngăn cuộn dọc, hãy sử dụng tràn-y: hidden như sau:

Xem Bút Ẩn thanh cuộn trong CSS và Ngăn cuộn (tràn-y: hidden) của Christina Perricone ( @hubspot ) trên CodePen .

Cách ẩn Thanh cuộn ngang trong CSS

cuộn ngang thường là một ý tưởng tồi , nên quy tắc này có thể hữu ích. Để ẩn thanh cuộn ngang và ngăn cuộn ngang, hãy sử dụng tràn-x: hidden :

Xem Bút Ẩn thanh cuộn trong CSS và Ngăn cuộn (tràn-x: ẩn) của Christina Perricone ( @hubspot ) trên CodePen .

Cách ẩn thanh cuộn cho đến khi cần thiết

Ẩn thanh cuộn 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.

Hầu hết khách truy cập liên kết hoạt động cuộn với thanh cuộn 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, thanh cuộn cho chúng ta biết chúng ta còn bao nhiêu trang để xem (trừ khi thực hiện cuộn 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 thanh cuộn có thể gây khó chịu.

Xem Thêm  Ký tự thay thế Python trong chuỗi - thay thế các ký tự trong chuỗi python

Thử nghiệm của người dùng có thể làm rõ việc thanh cuộn 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 thanh cuộn cho đến khi người dùng bắt đầu cuộn. Để bật tính năng này trong CSS, hãy sử dụng quy tắc tràn: tự động .

Xem cây bút Ẩn thanh cuộn cho đến khi cần đến của Christina Perricone ( @hubspot ) trên CodePen .

Ẩn Thanh cuộn bằng CSS

Cho dù bạn đang tạo 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 thanh cuộn 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, thanh cuộn 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.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề css ẩn thanh cuộn nhưng cho phép cuộn

Hiệu ứng cố định header khi cuộn trang bằng html css jquery | Unitop.vn

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-02-18
  • Đánh giá: 4 ⭐ ( 6473 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cố định header đang cuộn trang(sticky header) thường thấy ở các website nước ngoài. Trong video này tôi hướng dẫn bạn cách tạo ra nó từng bước với html, css và jquery.
    ——
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ————
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    ————————–
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

CSS ẩn thanh cuộn, nhưng có phần tử có thể cuộn

  • Tác giả: vi.ourladylakes.org
  • Đánh giá: 3 ⭐ ( 4475 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có phần tử này được gọi là các mục và nội dung bên trong phần tử dài hơn chiều cao phần tử, tôi muốn làm cho nó có thể cuộn được nhưng lại ẩn thanh cuộn, tôi sẽ làm như thế nào?

Sử dụng CSS để hide Scrollbar

  • Tác giả: websitehcm.com
  • Đánh giá: 3 ⭐ ( 1843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng CSS để hide Scrollbar w3seo cách ẩn thanh scrollbar trong html và css, sử dụng thuộc tính CSS để sử dụng hoặc cấm scrolling

CSS ẩn thanh cuộn, nhưng có phần tử có thể cuộn

  • Tác giả: vi.tlcpv.org
  • Đánh giá: 5 ⭐ ( 2277 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có phần tử này được gọi là các mục và nội dung bên trong phần tử dài hơn chiều cao phần tử, tôi muốn làm cho nó có thể cuộn được nhưng lại ẩn thanh cuộn, tôi sẽ làm như thế nào?

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  13 cách bạn có thể căn giữa nội dung theo chiều dọc trong CSS - css căn giữa văn bản theo chiều dọc