Bỏ tràn trong css
|
Để giới hạn số ký tự trong một đoạn văn bản, chúng ta thường xử lý bằng các ngôn ngữ lập trình phía Server hoặc sử dụng Javascript phía Client. Trong bài viết này mình giới thiệu tới các bạn theo một cách khác, đó là sử dụng thuộc tính Show Đôi khi chúng ta cần ẩn thanh cuộn của phần tử HTML. Việc làm này kích thích tăng cường thẩm định hay tuân thủ theo thiết kế. Có nhiều cách để đạt được nhưng dưới đây là một trong những cách đơn giản mình đã thử. Bằng cách sử dụng CSS với bộ chọn giả Để xuất hiện scrollbar, mình sử dụng max-height
Bằng cách này, thanh cuộn duyệt tự động bổ sung. Bây giờ mình sẽ thêm một số thuộc tính và giả để ẩn nó đi Thiết kế một trang web theo đúng cách bạn muốn thường yêu cầu phải loại 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à thanh cuộn Cho dù vì lý do thiết kế hay chức năng, bạn có thể 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 công việc này – ẩn thanh cuộn trong khi cho phép cuộn, ẩn thanh 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 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 trang web thử nghiệm Để đá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. Started any Các bài viết liên quan
Tóm tắt nội dung Cách ẩn thanh Scrollbar trong CSS (nhưng cho phép cuộn)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 đó vào phần nội dung (cho toàn bộ trang) hoặc một phần 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 mà bạn muốn nhắm mục tiêu. Đây là mã này trông giố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ử :
/* 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;
}Thanh cuộn thông thường 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 chặn điều này xảy ra trên các biến trình duyệt web phổ biến Xem thêm Scrollbar(thanh cuộn) trong CSS Cách ẩn Thanh cuộn trong CSS (và không cho phép Cuộn)Để ẩn thanh cuộn và tắt tính năng cuộn, chúng ta có thể sử dụng CSS tràn thuộc tính. 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 chặn việc cuộn với thuộc tính này, chỉ cần áp dụng quy tắc tràn. 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 tràn. thấy được để hiển thị nội dung ra ngoài biên giới của vùng chứa Điều này vô hiệu hóa cả cuộn 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ỉ cuộn ngang hoặc chỉ cuộn dọc Xem thêm Các tính năng ẩn của Yoast SEO 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 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 thanh cuộn ngang trong CSSBởi vì cuộn ngang nói chung là một ý niệm hư, 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. ẩn giấu /* 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 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 của 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 cuộn với một 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 lượng trang chúng ta còn lại để xem (ngoại 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 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 Thử nghiệm của người dùng có thể làm rõ thanh cuộn bị thiếu tác động như thế nào đến trải nghiệm của 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à thanh cuộn ẩ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 thêm CSS là gì? Ẩn thanh cuộn bằng CSSCho dù bạn đang xây dựng một trang bằng CSS thuần túy hay 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 về tiện ích hỗ trợ điều hướng. Nếu bạn định xóa nó, hãy nhớ làm điều này theo cách có chủ ý và theo cách hỗ trợ thiết kế của bạn |
