CSS Scrollbar Generator
Thiết kế thanh cuộn trực quan với xem trước thời gian thực.
Tự động tạo mã CSS tương thích với WebKit và Firefox.
Preview
Bản xem trước sẽ xuất hiện ở đây. Cuộn xuống để xem thiết kế. Đây là văn bản mẫu để tạo vùng cuộn. Điều chỉnh độ rộng, màu sắc và độ bo góc cho phù hợp với thiết kế trang web của bạn.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Customization
Generated CSS Code
Bạn cũng có thể thích
Giới thiệu về Trình tạo Scrollbar CSS
Trình tạo Scrollbar CSS là một công cụ trực tuyến miễn phí cho phép bạn tùy chỉnh thiết kế thanh cuộn trang web của mình và ngay lập tức tạo mã CSS cần thiết.
Chỉ cần thao tác các thanh trượt và bộ chọn màu để điều chỉnh các kiểu của thanh cuộn và nền, chẳng hạn như màu sắc, độ rộng và bo góc, trong khi xem bản xem trước thời gian thực.
Mã được tạo không chỉ tương thích với các trình duyệt WebKit như Chrome, Safari và Edge mà còn hỗ trợ Firefox thông qua scrollbar-color và scrollbar-width. Tất cả quá trình xử lý được hoàn tất trong trình duyệt của bạn, giúp sử dụng an toàn, nhanh chóng và miễn phí mà không cần cài đặt hoặc đăng ký.
Cách Sử Dụng Trình Tạo
Quyết định kích thước và hình dạng
Sử dụng các thanh trượt trong bảng điều khiển để đặt độ rộng và bo góc của thanh cuộn. Khu vực xem trước ngay lập tức phản ánh các điều chỉnh của bạn, vì vậy hãy tinh chỉnh chúng để phù hợp với thiết kế trang web của bạn.
Tùy chỉnh màu sắc
Sử dụng bộ chọn màu để chọn Màu thanh cuộn, Màu nền và Màu khi di chuột. Chọn màu sắc hài hòa với chủ đề trang web hoặc màu nhấn của bạn.
Sao chép và Áp dụng
Sau khi bạn hài lòng với bản xem trước, hãy kiểm tra mã CSS được tạo tự động ở cuối màn hình và nhấp vào nút "Sao chép CSS". Dán nó vào biểu định kiểu của trang web của bạn để hoàn tất việc triển khai.
Thuật ngữ Scrollbar CSS
- WebKit Prefix (::-webkit-scrollbar)
- Một pseudo-element CSS không chuẩn được sử dụng để tùy chỉnh các thanh cuộn trong các trình duyệt được cung cấp bởi các công cụ WebKit/Blink, chẳng hạn như Chrome, Safari và Edge. Nó cho phép thiết kế có thể tùy chỉnh cao.
- Scrollbar Track
- Nền hoặc rãnh của thanh cuộn. Bạn có thể tạo kiểu cho nó bằng ::-webkit-scrollbar-track để thiết lập màu nền hoặc bóng bên trong.
- Scrollbar Thumb
- Phần có thể kéo của thanh cuộn cho biết vị trí cuộn. Nó được tạo kiểu bằng cách sử dụng ::-webkit-scrollbar-thumb để điều chỉnh màu sắc và bo góc của nó.
- scrollbar-color và scrollbar-width
- Các thuộc tính CSS tiêu chuẩn W3C được hỗ trợ bởi các trình duyệt như Firefox không hỗ trợ các tiền tố WebKit. Chúng cho phép bạn thiết lập màu sắc của thanh cuộn và nền và xác định độ rộng (auto, thin hoặc none).
- Khả năng tương thích đa trình duyệt
- Khả năng của một trang web hoạt động và hiển thị nhất quán trên các trình duyệt web khác nhau (Chrome, Firefox, Safari, v.v.). Công cụ của chúng tôi tạo ra mã hoạt động liền mạch trên tất cả các trình duyệt chính.
Câu Hỏi Thường Gặp (FAQ)
- Q.Mã CSS được tạo có hoạt động trên điện thoại thông minh không?
- Có, nó hoạt động trên các trình duyệt di động dựa trên WebKit như Safari trên iOS và Chrome trên Android. Tuy nhiên, tùy thuộc vào thông số kỹ thuật của HĐH, thanh cuộn có thể chỉ xuất hiện khi đang cuộn.
- Q.Tôi có thể chỉ áp dụng thanh cuộn cho một phần tử cụ thể (như div) không?
- Có, bạn có thể. Chỉ cần thay thế .custom-scrollbar trong mã được tạo bằng class hoặc ID của phần tử cụ thể của bạn (ví dụ: .my-container hoặc #scroll-box).
- Q.Nó có tương thích với trình duyệt Firefox không?
- Có. Công cụ này tự động tạo không chỉ các pseudo-elements của WebKit mà còn cả các thuộc tính scrollbar-color và scrollbar-width tiêu chuẩn của W3C cho Firefox.
- Q.Dữ liệu của tôi có được lưu trên máy chủ khi sử dụng công cụ này không?
- Không. Công cụ này chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript, vì vậy các cài đặt và mã được tạo của bạn không bao giờ được gửi đến các máy chủ bên ngoài.
- Q.Làm cách nào tôi có thể ẩn hoàn toàn thanh cuộn?
- Để ẩn thanh cuộn trong khi vẫn giữ chức năng cuộn, bạn có thể sử dụng ::-webkit-scrollbar { display: none; } cho WebKit và scrollbar-width: none; cho Firefox.
Trường Hợp Sử Dụng
Thống nhất màu sắc thương hiệu
Thay đổi màu của thanh cuộn trên trang web công ty hoặc hồ sơ năng lực của bạn để phù hợp với màu thương hiệu của bạn, tăng cường tính nhất quán trong thiết kế tổng thể.
Các ứng dụng web UI tùy chỉnh
Hoàn hảo cho các ứng dụng web như ứng dụng trò chuyện hoặc bảng điều khiển nơi bạn có các vùng cuộn bên trong (divs) và muốn ẩn thanh cuộn OS tiêu chuẩn để có giao diện bóng bẩy hơn.
Hỗ trợ chế độ tối
Điều chỉnh thanh cuộn của bạn thành màu xám đậm hoặc các sắc thái tương tự để hòa quyện hoàn hảo vào chế độ tối của trang web của bạn, giảm độ chói và mỏi mắt cho người dùng.
Theo đuổi thiết kế tối giản
Thiết lập độ rộng thanh cuộn cực kỳ mỏng, làm cho nó không phô trương và giữ cho sự tập trung của người dùng vào nội dung thực tế của bạn.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.