Mọi người, có thể tăng chiều rộng của thanh cuộn trên một phần tử <div> được đặt bên trong <body> không?Chiều rộng thanh cuộn CSS
Tôi không nói về thanh cuộn mặc định trên chính trang trình duyệt, trang này chạy ở chế độ toàn màn hình và thanh cuộn trình duyệt không bao giờ được đưa vào hình ảnh, phần tử bên trong <div> có thanh cuộn riêng.
Nếu bạn đang nói về thanh cuộn tự động xuất hiện trên một div với overflow: scroll (hoặc auto), sau đó không, đó vẫn là một thanh cuộn gốc được hiển thị bằng trình duyệt sử dụng các tiện ích hệ điều hành bình thường và không phải thứ gì đó có thể được tạo kiểu (*).
Mặc dù bạn có thể thay thế bằng một proxy được tạo từ các div và JavaScript có thể tạo kiểu theo đề xuất của Matt, tôi sẽ không đề xuất nó cho trường hợp chung. Các thanh cuộn theo kịch bản lệnh không bao giờ hoạt động chính xác giống như các thanh cuộn của hệ điều hành thực, gây ra các vấn đề về tính khả dụng và khả năng truy cập.
(*: Ngoại trừ các kiểu màu của IE, tôi cũng không thực sự khuyên bạn nên sử dụng IE để giảm thiểu việc sử dụng các hình ảnh thanh cuộn đẹp từ chủ đề Windows hiện tại đến cũ xấu xí Thanh cuộn kiểu Win95.)
Có.
Nếu thanh cuộn không phải là thanh cuộn của trình duyệt, thanh cuộn sẽ được tạo thành từ các phần tử HTML thông thường (có thể là div s và span s) và do đó có thể được tạo kiểu (hoặc sẽ là Flash, Java, v.v. những môi trường đó).
Các chi tiết cụ thể phụ thuộc vào cấu trúc DOM được sử dụng.
bạn có thể quan tâm JScrollPane JQuery plugin, có vẻ như dễ sử dụng http://jscrollpane.kelvinluck.com/
Trải nghiệm của tôi khi cố gắng sử dụng CSS để sửa đổi thanh cuộn là không. Chỉ có IE mới cho phép bạn làm điều này.
webkit giờ đây cho phép ':: - webkit-scrollbar- [track | thumb | nút | góc]' – Trevor
Điều này có thể được thực hiện trong các trình duyệt dựa trên Webkit (như Chrome và Safari) chỉ với CSS:
::-webkit-scrollbar {
width: 2em;
height: 2em
}
::-webkit-scrollbar-button {
background: #ccc
}
::-webkit-scrollbar-track-piece {
background: #888
}
::-webkit-scrollbar-thumb {
background: #eee
}
Demo: jsfiddle.net/2aHeE
Tài liệu tham khảo:
Điều này không hoạt động trong Edge 40.15063.674.0 kể từ ngày 24/24/2017. Grrr. – enigment
Tôi không hiểu tại sao tất cả mọi người là rất hạnh phúc với điều đó JScrollPane cồng kềnh khi có được dễ dàng hơn giải pháp nhẹ hơn trên mạng, mà là nhanh hơn nhiều khi sử dụng bánh xe: http://baijs.com/tinyscrollbar/
Tôi thấy bình luận của bạn, đã thử nó và nó chỉ ném một lỗi: "Không thể đọc thuộc tính 'offsetHeight' của undefined". JScrollPane chỉ làm việc. Vì vậy, có lẽ đó là lý do tại sao – Paralife
Xin lỗi George giải pháp của bạn trong khi có vẻ đầy hứa hẹn, chỉ đơn giản là không hoạt động. – c0d3p03t
đã hoạt động cho tôi, nhưng không cuộn khi sử dụng bàn phím lên/xuống – robotik
Bạn có thể stablish thanh công cụ cụ thể cho div
div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
xem demo tại jsfiddle.net
Không phải trên Edge, không phải trên Firefox – Mishax
Xin chào bobince, Bạn nói đúng, phần tràn của nó: scroll/auto scrollbar. Tôi đã thử jScrollPane được đề xuất bởi Matt nhưng nó làm giảm hiệu suất của cuộn bởi một biên độ rất lớn. – t0mcat
Câu trả lời của bạn không còn được hỗ trợ. Có một số cách để tạo kiểu thanh cuộn trong Chrome và IE kể từ 2015 –
Đúng, đây không còn là câu trả lời đúng. –