CSS thanh cuộn

Thanh cuộn tùy chỉnh ngày nay đang trở nên phổ biến hơn và tôi rất muốn tìm hiểu về chúng. Có nhiều lý do khác nhau để tùy chỉnh thanh cuộn. Ví dụ: thanh cuộn mặc định có thể làm cho giao diện người dùng ứng dụng trông không nhất quán trên nhiều hệ điều hành và ở đây chúng ta có thể nhận được lợi ích khi có một kiểu thống nhất

Tôi luôn muốn tìm hiểu về cách tùy chỉnh thanh cuộn trong CSS nhưng không có cơ hội thực hiện. Trong bài viết này, tôi sẽ nhân cơ hội và tìm hiểu về chúng và ghi lại hành trình này

Giới thiệu

Điều đầu tiên mà tôi muốn giải thích là các thành phần hoặc các phần của thanh cuộn. Một thanh cuộn chứa rãnh và ngón tay cái. Đây là một hình ảnh cho thấy họ

Rãnh là cơ sở của thanh cuộn, trong đó ngón tay cái là thứ mà người dùng kéo để cuộn trong một trang hoặc một phần

Có một điều quan trọng cần lưu ý là thanh cuộn có thể hoạt động theo chiều ngang hoặc chiều dọc, tùy thuộc vào thiết kế. Ngoài ra, điều đó có thể thay đổi khi làm việc trên một trang web đa ngôn ngữ hoạt động theo cả hướng từ trái sang phải (LTR) và từ phải sang trái (RTL)

Tùy chỉnh thiết kế thanh cuộn

Có một thanh cuộn tùy chỉnh từng chỉ là webkit nên Firefox và IE đã ra khỏi trò chơi. Chúng tôi có một cú pháp mới chỉ hoạt động trong Firefox và sẽ giúp chúng tôi thực hiện mọi việc dễ dàng hơn khi nó được hỗ trợ đầy đủ. Tôi sẽ xem qua cú pháp Webkit cũ và sau đó là cú pháp mới

Cú pháp cũ

Chiều rộng thanh cuộn

Đầu tiên, chúng ta cần xác định kích thước của thanh cuộn. Đây có thể là chiều rộng cho thanh cuộn dọc và chiều cao cho thanh cuộn ngang

.section::-webkit-scrollbar {
  width: 10px;
}

Với bộ đó, chúng ta có thể tự tạo kiểu cho thanh cuộn

Đường ray thanh cuộn

Điều này đại diện cho cơ sở của thanh cuộn. Chúng ta có thể tạo kiểu cho nó bằng cách thêm màu nền, bóng đổ, bán kính đường viền và đường viền

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

Ngón cái thanh cuộn

Khi chúng ta đã sẵn sàng phần đế của thanh cuộn, chúng ta cần tạo kiểu cho ngón tay cái của thanh cuộn. Điều đó quan trọng vì người dùng có thể kéo ngón tay cái này để tương tác với thanh cuộn

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

Cùng với đó, chúng tôi đã giới thiệu cách cũ để tạo kiểu thanh cuộn tùy chỉnh trong CSS. Hãy cùng khám phá cú pháp mới

Cú pháp mới

chiều rộng thanh cuộn

Như đã nói, điều này xác định chiều rộng của thanh cuộn và các giá trị mà chúng tôi quan tâm nhất là

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

9 và

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

0. Thật không may, chúng tôi không thể xác định một số cụ thể như trong cú pháp webkit

.section {
  scrollbar-width: thin;
}

Màu thanh cuộn

Với thuộc tính này, chúng ta có thể xác định màu cho cả rãnh thanh cuộn và ngón tay cái dưới dạng giá trị cặp

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

Đơn giản như cú pháp mới này, nhưng nó hạn chế. Chúng tôi chỉ có thể áp dụng màu rắn. Chúng tôi không thể thêm bóng, độ dốc, cạnh tròn hoặc bất kỳ thứ gì tương tự. Những gì chúng tôi được phép tùy chỉnh chỉ là màu sắc

máng xối thanh cuộn

Bạn đã bao giờ tự hỏi về cách chúng tôi có thể tránh thay đổi bố cục khi nội dung phát triển trong vùng chứa cuộn chưa?

.box {
  padding: 1rem;
  max-height: 220px;
  overflow-y: auto;
}

Chúng tôi có một thùng chứa có lớp đệm

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

1 ở tất cả các mặt. Cho đến bây giờ, nội dung còn ngắn và thanh cuộn không được hiển thị vì

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

2 được sử dụng (Lời nhắc thân thiện. khi

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

9 được sử dụng cho

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

4, nó sẽ không hiển thị thanh cuộn cho đến khi nội dung dài)

Khi nội dung phát triển, thanh cuộn sẽ được hiển thị và do đó không gian dành cho nội dung sẽ bị giảm

Lưu ý cách nội dung thay đổi khi có thanh cuộn. Đó là bởi vì trình duyệt nên dành một khoảng trống cho thanh cuộn

Rất may, điều này có thể được giải quyết ngay bây giờ với

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

5 (được hỗ trợ trong các trình duyệt dựa trên Chromium, v94+). Nó hoạt động theo cách cho phép chúng tôi đặt chỗ trước. Giá trị mặc định là

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

9 và giá trị khác là

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

7. Điều đáng nói là có một giá trị tùy chọn

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

8 hiển thị máng xối ở cả hai bên

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

6

Bằng cách đó, khi nội dung phát triển, nó sẽ không thay đổi vì trình duyệt đã dành chỗ cho nó. Dưới đây là hình ảnh hiển thị hai trường hợp (Nội dung ngắn so với nội dung dài)

Để làm cho mọi thứ rõ ràng hơn, tôi đã làm việc trên một bản trình diễn tương tác cho thấy cách thêm máng xối vào thùng chứa

Xem Máng xối thanh cuộn bút - Bản demo của Ahmad Shadeed (@shadeed) trên CodePen

Chỉ định phạm vi của thanh cuộn tùy chỉnh

Một điều quan trọng cần biết là nơi để tùy chỉnh thanh cuộn. Bạn có muốn phong cách chung chung và hoạt động cho tất cả các thanh cuộn trên trang web không?

Với cú pháp cũ, chúng ta có thể viết các bộ chọn mà không cần gắn chúng vào một phần tử và chúng sẽ được áp dụng cho tất cả các phần tử có thể cuộn

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

7

Tuy nhiên, nếu bạn chỉ muốn áp dụng cho một phần cụ thể, bạn cần thêm phần tử vào trước bộ chọn

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

8

Đối với cú pháp mới, nó gần như giống nhau. Điều mà tôi nhận thấy là nếu bạn muốn có một phong cách chung chung, nó nên được áp dụng cho phần tử

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

9, không phải cho phần tử

.section {
  scrollbar-width: thin;
}

0

.section::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

1

Tôi đã thử thêm phần trên cho

.section {
  scrollbar-width: thin;
}

0 nhưng nó không hoạt động như mong đợi

Bây giờ chúng ta đã biết cách thức hoạt động của cú pháp cũ và mới, hãy bắt đầu tùy chỉnh một số thiết kế thanh cuộn

Tùy chỉnh thiết kế thanh cuộn

ví dụ 1

Trước khi đi sâu vào tùy chỉnh thanh cuộn, cần nói về kiểu mặc định trong Mac OS. Đây là cách nó trông

• Rãnh thanh cuộn có đường viền ở bên trái và bên phải, với màu nền đồng nhất
• Ngón cái của thanh cuộn được làm tròn và có khoảng trống xung quanh từ bên trái và bên phải

Đối với cửa sổ, nó hơi khác một chút

Đây là cách chúng tôi có thể tùy chỉnh thanh cuộn dựa trên mô hình mô phỏng ở trên

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

0

Việc thêm

.section {
  scrollbar-width: thin;
}

2 cho cả rãnh và ngón tay cái là cần thiết vì nó sẽ không hoạt động trên

.section {
  scrollbar-width: thin;
}

3

Với cú pháp mới, chúng tôi không thể điều chỉnh

.section {
  scrollbar-width: thin;
}

4 của thanh cuộn và điều duy nhất có thể làm là thay đổi màu nền của rãnh và ngón tay cái

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

1

Ghi chú. các ví dụ tiếp theo chỉ hoạt động với cú pháp

.section {
  scrollbar-width: thin;
}

5. Đối với dự án thực tế, bạn có thể thêm cả cú pháp

.section {
  scrollbar-width: thin;
}

5 và cú pháp mới

ví dụ 2

Đối với ví dụ này, thiết kế nặng hơn một chút vì nó chứa độ dốc và bóng. Điều đó có khả thi không? . Hãy xem làm thế nào

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

2

Xem Thanh cuộn tùy chỉnh bút - 2 của Ahmad Shadeed (@shadeed) trên CodePen

ví dụ 3

Chúng tôi cũng có thể thêm đường viền vào ngón tay cái và theo dõi, điều này có thể giúp chúng tôi thực hiện một số thiết kế phức tạp

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

3

Dựa trên ví dụ tương tự, chúng ta có thể đặt lại viền trên và dưới thành

.section {
  scrollbar-width: thin;
}

7 và nhận được hiệu ứng thú vị cho ngón tay cái. Lưu ý những yếu tố nhỏ ở trên cùng và dưới cùng của ngón tay cái

Xem Thanh cuộn tùy chỉnh bút - 3 của Ahmad Shadeed (@shadeed) trên CodePen

Ví dụ 4

Trong ví dụ này, chúng tôi muốn ngón tay cái của thanh cuộn có độ lệch từ mọi phía. Vì không thể sử dụng

.section {
  scrollbar-width: thin;
}

8 với các thuộc tính của thanh cuộn, nên chúng tôi cần khắc phục điều đó bằng cách sử dụng đường viền CSS và

.section {
  scrollbar-width: thin;
}

9. Tôi đã biết về ý tưởng này từ bài báo tuyệt vời này của Gabriel Romualdo

Theo mặc định, khi một phần tử có nền và đường viền, trình duyệt sẽ cắt

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

0

Xem xét ví dụ sau

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

4

Chúng tôi có một nút có viền đen

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

1. Nó không có phần đệm để giải thích khái niệm. Giả sử rằng

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

2 được đặt thành

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

0, đường viền sẽ được bao gồm trong kích thước của nút. Kết quả là đường viền xuất hiện phía trên nền

Bây giờ, khi chúng tôi áp dụng

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

4, nền sẽ chỉ xuất hiện xung quanh nội dung

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

5

Tôi hy vọng ý tưởng là rõ ràng. Hãy quay trở lại ngón tay cái của thanh cuộn. Để bắt chước hiệu ứng, chúng ta cần thêm vào như sau

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

6

Và chúng tôi đã hoàn thành

Xem Thanh cuộn tùy chỉnh bút - 4 của Ahmad Shadeed (@shadeed) trên CodePen

Cùng với đó, chúng tôi đã khám phá cách tùy chỉnh các thiết kế thanh cuộn khác nhau. Đối với Firefox, chúng ta có thể sử dụng cú pháp mới nhưng một lần nữa, nó chỉ giới hạn ở độ dày và màu đồng nhất

Chúng tôi có thể thêm hiệu ứng di chuột không?

Có, chúng tôi có thể thêm hiệu ứng di chuột vào ngón tay cái của thanh cuộn cho cú pháp cũ và mới

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

7

Với cú pháp mới, chúng ta có thể thêm các hiệu ứng chuyển tiếp, trong khi với cú pháp cũ, chúng ta không thể. Đây không phải là vấn đề lớn đối với tôi

Hiển thị thanh cuộn khi cần

Có thể tạo một phần tử có thể cuộn bằng cách thêm một giá trị khác với

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

5 vào thuộc tính

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

6. Bạn nên sử dụng từ khóa

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

9 vì nó sẽ chỉ hiển thị thanh cuộn nếu nội dung vượt quá vùng chứa của nó

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

8

Mối quan tâm về khả năng tiếp cận

Trong khi tùy chỉnh thiết kế thanh cuộn, hãy nhớ để có độ tương phản tốt giữa ngón tay cái và rãnh để người dùng có thể dễ dàng nhận thấy

Xem xét ví dụ "xấu" sau đây cho thanh cuộn tùy chỉnh

Màu ngón tay cái hầu như không đáng chú ý. Điều này không tốt cho người dùng vì nó sẽ gây khó khăn hơn trong trường hợp họ được sử dụng để cuộn qua ngón tay cái

Bạn có thể định kiểu CSS cho thanh cuộn không?

Làm cách nào để tạo CSS có thể cuộn?

Làm cách nào để đặt chiều rộng thanh cuộn trong CSS?