Thanh cuộn và Trải nghiệm Người dùng
Người dùng hiện đã quen với một trải nghiệm nhất định khi điều hướng các trang web. Ví dụ:bạn sẽ mong đợi biểu trưng của một doanh nghiệp ở góc trên bên trái của trang web sẽ đưa bạn đến trang chủ. Nhưng nếu không thì sao? Điều gì sẽ xảy ra nếu mọi thứ trên trang web đó ngược lại về những gì bạn nghĩ nó sẽ làm?
Chỉ cần tưởng tượng nếu thanh cuộn tồn tại, nhưng khi bạn di chuyển nút cuộn trên chuột hoặc bạn kéo ngón tay trên bàn di chuột của thiết bị, không có gì xảy ra . Đó sẽ được coi là một trải nghiệm người dùng kinh khủng .
Điều gì tạo nên hoặc phá vỡ trải nghiệm người dùng tốt có thể là một bài đăng, nhưng một phần của nó chắc chắn là các thanh cuộn hoạt động bình thường và khả năng ẩn chúng để tăng tính thẩm mỹ.
Thanh cuộn là chỉ báo rất tốt về những gì chúng ta có thể mong đợi thấy trên một trang web. Nếu chúng ta thấy một thanh cuộn, chúng ta cần phải cuộn xuống để xem nội dung. Khi chúng tôi không thấy thanh cuộn, thường là vì một trong hai lý do:
- Những gì bạn thấy là những gì bạn nhận được - chiều cao và chiều rộng của khung nhìn (màn hình của bạn) khớp với chiều cao và chiều rộng của trang web.
- Thiết kế của trang web kết hợp một số loại mũi tên hoạt hình hoặc tính năng cho biết có nhiều nội dung hơn có sẵn thông qua việc cuộn. Chỉ khi chúng ta bắt đầu cuộn thì thanh cuộn mới xuất hiện. Nó mặc định là ở ẩn cho đến khi đó.
Với tư cách là nhà phát triển, việc sử dụng thanh cuộn hợp lý sẽ cải thiện trải nghiệm người dùng của một trang web, do đó sẽ giữ chân khách hàng trên trang web.
Ghi chú bên lề: Đảm bảo sử dụng thanh cuộn ngang khi bạn cố ý muốn sử dụng chúng. Nếu chúng không chủ ý xuất hiện trên trang web của bạn, thường là do kích thước các thành phần của bạn bị lỗi. Đừng cố tình ẩn các thanh cuộn ngang khi chúng không ở đó.
Triển khai CSS
Điều đầu tiên cần lưu ý về việc triển khai này là không phải tất cả các trình duyệt chính đều được tạo ra như nhau. Những gì phù hợp với Firefox sẽ không hoạt động với Chrome hoặc Internet Explorer và ngược lại. CSS sử dụng cái mà chúng tôi gọi là tiền tố nhà cung cấp hoặc tiền tố trình duyệt để giúp chúng tôi cung cấp hỗ trợ trên nhiều trình duyệt. Chúng tôi liệt kê chúng dưới đây:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Trang tính gian lận tiền tố nhà cung cấp
| Tiền tố nhà cung cấp | Các trình duyệt mà nó bao gồm |
| -webkit- | Chrome, Safari, phiên bản mới của Opera và hầu hết các trình duyệt iOS, bao gồm cả Firefox dành cho iOS |
| -moz- | Firefox (không phải iOS) |
| -o- | Phiên bản Opera cũ |
| -ms- | Internet Explorer và MS Edge |
URL: Tín dụng:MDN - Tiền tố CSS
Văn bản thay thế:Mạng nhà phát triển Mozilla đã tạo một bảng gian lận tiện dụng để ghi nhớ tiền tố nào sẽ sử dụng
Chú thích: MDN đã tạo một bảng gian lận tiện dụng để ghi nhớ tiền tố nào sẽ sử dụng cho trình duyệt nào
Sau đó, câu hỏi trở thành, làm thế nào chúng ta biết khi nào chúng ta cần tiền tố và khi nào thì không? Những người tạo CSS luôn thử nghiệm các thuộc tính mới và cách hoạt động mới - nếu có một thuộc tính khá mới, rất có thể nó chưa tương thích trên tất cả các trình duyệt.
Rất may, có sẵn các công cụ sẽ xem xét CSS của bạn và thêm các tiền tố bạn cần. Bạn cũng có thể làm điều đó theo cách thủ công và sử dụng một trang web như caniuse hoặc tài liệu MDN để giúp bạn xác định khả năng tương thích của trình duyệt.
Let’s Code!
<!DOCTYPE html>
<html>
<head>
<title>CSS: Hide the Scrollbar</title>
<style>
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox implementation */
}
body {
max-height: 500px;
}
h1 {
text-align: center;
}
.container, .sample-text {
max-height: 500px;
height: 500px;
}
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none; /* webkit browsers implementation */
}
.sample-text {
width: 425px;
height: 475px;
margin: 0px 0px 10px 10px;
}
</style>
</head>
<!-- /* Sample Text From https://doctoripsum.com */ -->
<body>
<h1>CSS Hide Scrollbar</h1>
<div class="container">
<div class="inner-container">
<div class="sample-text">
<p>It is! It's the city of New New York! Strictly speaking,
it's the fifteenth New York since the original, so that
makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York. River, you know my name. You whispered my name in
my ear! There's only one reason I would ever tell anyone my
name. There's only one time I could... New-new-Doctor. Don't
you think she looks tired? I'll tell you what, then:
don't...step on any butterflies. What have butterflies ever
done to you? Oh, yes. Harmless is just the word: that's why
I like it! Doesn't kill, doesn't wound, doesn't maim. But
I'll tell you what it does do: it is very good at opening
doors!</p>
<p>Aw, I wanted to be ginger! I've never been ginger!
And you, Rose Tyler! Fat lot of good you were! You gave up
on me! Ooh, that's rude. Is that the sort of man I am now?
Am I rude? Rude and not ginger. Sweet, maybe... Passionate,
I suppose... But don't ever mistake that for nice. Please,
when Torchwood comes to write my complete history, don't
tell people I travelled through time and space with her
mother! New-new-Doctor. Don't you think she looks tired? I'm
the Doctor, I can save the world with a kettle and some
string! And look! I'm wearing a vegetable! New-new-Doctor.
I'm sorry. I'm so sorry. It is! It's the city of New New
York! Strictly speaking, it's the fifteenth New York since
the original, so that makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York.</p>
</div>
</div>
</div>
</body>
</html>
Khi chúng tôi chạy mã này trong Chrome, nó sẽ tạo ra nền div màu xám và một số văn bản mà bạn có thể cuộn qua. Hai cách triển khai phổ biến nhất được bao gồm - Firefox nằm ở đầu mã trong <style> nhãn. Hầu hết mọi thứ khác đều nằm trong thuộc tính tiền tố –webkit.
Điều bạn sẽ nhận thấy trong quá trình triển khai của mình là không có thanh cuộn, nhưng nó vẫn có chức năng của thanh cuộn. Đây là một số cách để ẩn thanh cuộn của bạn trong CSS. Điều gì khác đã làm việc cho bạn? Tôi thách bạn chơi với mã của bạn để xem liệu bạn có thể tìm ra cách khác hay không.