Thanh cuộn tùy chỉnh CSS trong div

327

Làm cách nào tôi có thể tùy chỉnh thanh cuộn qua CSS (Cascading Style Sheets) cho một divvà không phải toàn bộ trang?

css  html  scrollbar 
— người có thẩm quyền
nguồn
overflow:auto;Chỉ áp dụng cho điều đó <div>. Bất kỳ chi tiết nền?
— Rob W
Tôi đã làm điều đó, nhưng tôi cần thanh cuộn tùy chỉnh, uhm .. thiết kế thanh cuộn
— haritorev
Tự phối màu? Điều đó chỉ được hỗ trợ trong IE chứ không phải trong các trình duyệt hiện đại khác. Điều này không thể đạt được bằng cách sử dụng CSS thuần túy.
— Rob W
1
Giải pháp JS đơn giản nhất (CSS không có hỗ trợ trình duyệt chéo) - yaireo.github.io/fakescroll
— vsync
Xem câu trả lời của tôi ở đây: stackoverflow.com/questions/7357203/custom-scrollbars/ory
— Buzinas

Câu trả lời:

688

Tôi nghĩ sẽ rất hữu ích khi hợp nhất các thông tin mới nhất về thanh cuộn, CSS và khả năng tương thích của trình duyệt.

Hỗ trợ CSS Thanh cuộn

Hiện tại, không tồn tại định nghĩa kiểu dáng thanh cuộn chéo trình duyệt CSS. Bài báo W3C tôi đề cập ở phần cuối có tuyên bố sau và được cập nhật gần đây (ngày 10 tháng 10 năm 2014):

Một số trình duyệt (IE, Konqueror) hỗ trợ các thuộc tính không chuẩn 'thanh cuộn-bóng-màu', 'thanh cuộn theo dõi màu' và các thuộc tính khác. Các thuộc tính này là bất hợp pháp: chúng không được xác định trong bất kỳ đặc điểm kỹ thuật CSS nào và chúng không được đánh dấu là độc quyền (bằng cách thêm tiền tố vào "-vendor-")

Microsoft

Như những người khác đã đề cập, Microsoft hỗ trợ kiểu thanh cuộn, nhưng chỉ dành cho IE8 trở lên.

Thí dụ:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

Chrome & Safari (WebKit)

Tương tự, WebKit hiện có phiên bản riêng:

Firefox (tắc kè)

Kể từ phiên bản 64, Firefox hỗ trợ tạo kiểu thanh cuộn thông qua các thuộc tính scrollbar-color(một phần, bản nháp W3C ) và scrollbar-width( bản nháp W3C ). Một số thông tin tốt về việc thực hiện có thể được tìm thấy trong câu trả lời này .

Tạo kiểu thanh cuộn đa trình duyệt

Các thư viện và trình cắm JavaScript có thể cung cấp giải pháp trình duyệt chéo. Có nhiều lựa chọn.

Danh sách có thể tiếp tục. Đặt cược tốt nhất của bạn là tìm kiếm xung quanh, nghiên cứu và thử nghiệm các giải pháp có sẵn. Tôi chắc chắn bạn sẽ có thể tìm thấy một cái gì đó sẽ phù hợp với nhu cầu của bạn.

Ngăn chặn thanh cuộn bất hợp pháp

Chỉ trong trường hợp bạn muốn ngăn kiểu thanh cuộn chưa được thêm tiền tố đúng với "-vendor", bài viết này tại W3C cung cấp một số hướng dẫn cơ bản . Về cơ bản, bạn sẽ cần thêm CSS sau vào bảng kiểu người dùng được liên kết với trình duyệt của bạn. Các định nghĩa này sẽ ghi đè kiểu dáng thanh cuộn không hợp lệ trên bất kỳ trang nào bạn truy cập.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Câu hỏi trùng lặp hoặc tương tự / Nguồn không được liên kết ở trên

Lưu ý: Câu trả lời này chứa thông tin từ nhiều nguồn khác nhau. Nếu một nguồn đã được sử dụng, thì nó cũng được liên kết trong câu trả lời này.

— Mãnh
nguồn
227
Web đã tồn tại hơn hai thập kỷ và vẫn chưa có một cách tiêu chuẩn nào để tạo kiểu thanh cuộn. Hai mươi năm ủy ban tiêu chuẩn không nhận thấy rằng mọi người cuộn mọi thứ. Không có tỷ lệ vỗ tay chậm rãi, châm biếm sẽ thể hiện đầy đủ điều đó khiến tôi cảm thấy như thế nào. Nhưng tôi nghĩ rằng sự chậm trễ 20 năm giữa tiếng vỗ tay thứ nhất và lần thứ hai sẽ phù hợp. Đối với một số quan điểm, tôi chưa được sinh ra khi WWW ra mắt, và bây giờ tôi là một kỹ sư máy tính. Con đường để đi, W3C.
— Bắn Parthian
3
Chỉ cần thêm hai xu của tôi: Gmail và Youtube có thanh cuộn được cách điệu trong Chrome và bản gốc trong Explorer và Firefox. Nếu những tiêu chuẩn đó đủ tốt cho chúng thì nó cũng đủ tốt cho tôi
— yonatanmn
9
@ PaulD.Waite Vâng, có thể, nhưng điều đó có thể được áp dụng cho bất cứ điều gì. Và CSS tồn tại như một ngôn ngữ chính xác để các nhà thiết kế có thể chọn ghi đè mặc định. Toàn bộ ý tưởng là một nhà thiết kế UI xấu có thể làm cho bất kỳ yếu tố nào trở nên không trực quan, nhưng ngay khi bạn cho rằng nhà thiết kế trang web không đủ năng lực, thì điểm nào trong việc cho phép tùy chỉnh trang?
— Bắn Parthian
6
@ PaulD.Waite Rõ ràng, đây không phải là một trong những điều đó. Một phần vì nó nằm trong khu vực của màn hình mà nhà thiết kế trang web nên kiểm soát hoàn toàn, vì vậy, nó không gây ra rủi ro bảo mật và một phần vì rõ ràng - trong thực tế - đó không phải là vấn đề. Rất nhiều trang web thực hiện các bản hack của riêng họ để làm cho mọi thứ trông và hoạt động giống như thanh cuộn, và chúng hoạt động tốt. Không chỉ chúng hoạt động tốt, và trông đẹp hơn, mà mọi người thực sự hiểu làm thế nào để sử dụng chúng, đó là điểm chính. Thật không may, vì chúng là hack, đôi khi chúng sẽ không chơi tốt với những thứ như chức năng in.
— Bắn Parthian
5
Câu trả lời này không hoàn toàn giải quyết câu hỏi của anh ấy, đó là cách áp dụng các kiểu thanh cuộn cho một div cụ thể , thay vì toàn bộ trang.
— Stewart
14

Hãy thử cái này

Nguồn: https://nicescroll.areaaperta.com/

Thực hiện đơn giản 

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

Nó là một thanh cuộn plugin jQuery, vì vậy các thanh cuộn của bạn có thể điều khiển được và trông giống nhau trên các hệ điều hành khác nhau.

— Dilusha Gonagala
nguồn
Tôi chắc chắn rằng nó có thể tùy chỉnh, nhưng bản demo trên trang của họ cuộn quá chậm và thanh cuộn quá khó để lấy.
— Ngỗng
4
Giống như hầu hết tất cả các trình cắm jQuery - [shudders] - điều này rất chậm so với các triển khai cuộn được tăng tốc, luồng, luồng gốc. Hoàn toàn không phù hợp cho các ứng dụng nghiêm trọng và cản trở UX tốt. Tôi khuyên bạn nên tránh điều này, trừ khi đó là cho một trang web đồ chơi.
— John Weisz
2
Tôi ghét nó khi mọi người gọi một cái gì đó thuần javascript rồi BAM! một plugin jquery.
— Đinh Trần
Tôi không khuyên bạn nên sử dụng nicescroll, vì nó vô hiệu hóa chức năng trình duyệt. Cuộn với nhấp chuột giữa không hoạt động với nicescroll.
— Aloso
yêu niceScroll này, nó không thêm wrapper div yếu tố xung quanh có nghĩa là nó không phá vỡ cấu trúc html
— datdinhquoc
11

Thanh cuộn tùy chỉnh không thể có với CSS, bạn sẽ cần một số phép thuật JavaScript.

Một số trình duyệt hỗ trợ các quy tắc CSS không đặc tả, chẳng hạn như ::-webkit-scrollbartrong Webkit nhưng không lý tưởng vì nó sẽ chỉ hoạt động trong Webkit. IE cũng có một cái gì đó tương tự, nhưng tôi không nghĩ họ hỗ trợ nó nữa.

— elclanrs
nguồn
2
câu trả lời lỗi thời
— T.Todua 7/12/18
1
@ T.Todua Điều gì là lỗi thời về câu trả lời này?
— kojow7
6

Giống như nhiều người, tôi đang tìm kiếm thứ gì đó:

  • Phong cách và chức năng nhất quán trên hầu hết các trình duyệt hiện đại
  • Không phải là một số tiện ích mở rộng jQuery 3000 dòng lố bịch cr * p

... Nhưng than ôi - không có gì!

Chà, nếu một công việc đáng làm ... Tôi đã có thể lấy thứ gì đó và chạy trong khoảng 30 phút. Tuyên bố miễn trừ trách nhiệm: có khá nhiều vấn đề đã biết (và có thể là một vài vấn đề chưa được biết) với nó, nhưng nó khiến tôi tự hỏi 2920 dòng JS khác trên Trái đất có gì trong nhiều dịch vụ!

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>
Mở rộng đoạn trích

— ne1410s
nguồn
1
nền: tuyến tính-gradient (sang phải, đỏ, vàng);
— xgqfrms
5

Tôi đã thử rất nhiều plugin, hầu hết trong số chúng không hỗ trợ tất cả các trình duyệt, tôi thích iScroll và nanoScroller hoạt động cho tất cả các trình duyệt này:

  • IE11 -> IE6
  • IE10 - WP8
  • IE9 - WP7
  • Xbox One
  • Xbox Xbox 360
  • Google Chrome
  • FireFox
  • Opera
  • Safari

Nhưng iScroll không hoạt động với cảm ứng!

bản demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
bản demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

— Hồi giáo
nguồn
cuộn nano không hỗ trợ cuộn ngang.
— FlavorScape
Repo được lưu trữ github.com/cubiq/iscroll Tôi sẽ đề nghị tìm kiếm các lựa chọn thay thế khác
— Ouadie
5

Vui lòng kiểm tra liên kết này. Ví dụ với bản demo làm việc

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Thanh cuộn CSS

2
Cảm ơn bạn đã demo. Lần đầu tiên tôi chạy nó với Firefox 58.0.2 (64-bit, Windows 7 Pro / 64) và tất cả các thanh cuộn của nó đều giống hệt nhau. Sau đó chạy với Chrome Phiên bản 65.0.3325.162 (Bản dựng chính thức) (64-bit) và tất cả chúng đều khác nhau. Vì vậy (có lẽ vô tình) bạn đã chứng minh những hạn chế của -webkit-phương pháp này.
— MÃ-REaD
4

Firefox phiên bản mới (64) hỗ trợ CSS Scrollbars Module Cấp 1 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
Mở rộng đoạn trích

Nguồn: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Thanh cuộn Firefox

https://codepen.io/fatihhayri/pen/pqdrbd

— Fatih Hayrioğlu
nguồn
3

Đây là một ví dụ về webkit hoạt động cho Chrome và Safari:

CSS:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Đầu ra:

nhập mô tả hình ảnh ở đây

— Denys Wessels
nguồn
3 
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

đã cho tôi một điện thoại di động / osx đẹp như một.

— csomakk
nguồn
1
Một phản ứng ngắn gọn hơn. IMHO nó thực sự đã trả lời câu hỏi của OP đó là cách tạo kiểu chỉ một div. Đẹp.
— Danimal Reks
2

Có một cách mà bạn có thể áp dụng thanh cuộn tùy chỉnh cho các thành phần div tùy chỉnh trong tài liệu HTML của mình. Đây là một ví dụ giúp. https://codepen.io/adeelibr/pen/dKqZNb Nhưng như một ý chính của nó. Bạn có thể làm một cái gì đó như thế này.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

Tệp CSS trông như thế này.

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
— Adeel Imran
nguồn
2

Đây là những gì Google đã sử dụng trong một số ứng dụng của mình trong một thời gian dài. Xem trong mã rằng, nếu bạn áp dụng các lớp tiếp theo, bằng cách nào đó chúng ẩn thanh cuộn trong Chrome, nhưng nó vẫn hoạt động.

Các lớp học được jfk-scrollbar, jfk-scrollbar-borderlessvàjfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
Mở rộng đoạn trích

http://jsfiddle.net/76kcuem0/32/

Tôi chỉ thấy nó hữu ích để loại bỏ các mũi tên từ thanh cuộn. Kể từ năm 2015, nó đã được sử dụng trong Google Maps khi tìm kiếm các vị trí trong danh sách kết quả trong giao diện người dùng thiết kế vật liệu của nó.

— le0diaz
nguồn
1

Thanh cuộn Webkit không hỗ trợ trên hầu hết các trình duyệt.

Hỗ trợ trên CHROME

Dưới đây là bản demo cho thanh cuộn webkit Webkit Thanh cuộn DEMO

Nếu bạn đang tìm kiếm nhiều ví dụ Kiểm tra thêm Ví dụ này

Phương pháp khác là Plugin Jquery Scroll Bar

Nó hỗ trợ trên tất cả các trình duyệt và dễ dàng áp dụng

Tải xuống plugin từ Tải xuống tại đây

Cách sử dụng và để có nhiều lựa chọn hơn KIỂM TRA NÀY

BẢN GIỚI THIỆU

— Nikz
nguồn
1

Tôi đã thử rất nhiều cuộn của JS và CSS và tôi thấy nó rất dễ sử dụng và được thử nghiệm trên IE và Safari và FF và hoạt động tốt

NHƯ @thebluefox đề nghị

Đây là cách nó làm việc

Thêm đoạn script dưới đây vào 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Và đây là đoạn bạn cần cuộn

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

Để biết thêm chi tiết truy cập trang plugin

Thanh cuộn tùy chỉnh FaceScroll

hy vọng nó giúp

— Yousef Altaf
nguồn
0

Đối với những người vẫn đang tìm kiếm một giải pháp tốt chỉ cần tôi tìm ra plugin đơn giản này

Thư viện cuộn tùy chỉnh vanilla thư viện javascript với cuộn gốc, được thực hiện đơn giản, gọn nhẹ, dễ sử dụng và trình duyệt chéo.

Trong trường hợp của tôi, tôi đang tìm kiếm các giải pháp ReacJS, tác giả cũng cung cấp các hàm bao cho các ví dụ phản ứng, góc cạnh, vue và tiếp theo

— ManBearPig
nguồn
0

Các trình duyệt Webkit (như Chrome, Safari và Opera) hỗ trợ phần tử giả không chuẩn :: - webkit-scrollbar , cho phép chúng tôi sửa đổi giao diện của thanh cuộn của trình duyệt.

Lưu ý: Các :: - webkit-cuộn không được hỗ trợ bởi trình duyệt Firefox hoặc IE và Edge.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
</div>
Mở rộng đoạn trích

Tham khảo: Cách tạo một thanh cuộn tùy chỉnh

— Vishal
nguồn
0

Giả sử bạn có div như 

<div class="custom_scroll"> ... </div>

Áp dụng các kiểu CSS như 

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    opacity: 0.5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    //background-color: #555;
}

Cuộn kết quả sẽ xuất hiện dưới dạng

nhập mô tả hình ảnh ở đây

— Saumyajit
nguồn
-1

Hoặc sử dụng một cái gì đó như thế này:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

Và khởi tạo:

<body onload="new MiniScroll(this);"></body>

Và tùy chỉnh:

.scroll-place { // ... // }
.scroll { // ... // }
— Làm thế nào để làm gì đó
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.