这是谷歌在它的一些应用程序中使用了很长时间的方法。在代码中看到，如果你应用下一个类，他们以某种方式隐藏滚动条在Chrome，但它仍然工作。

这些类是jfk-scrollbar、jfk-scrollbar-borderless和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>

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

我发现从滚动条中移除箭头很有用。截至2015年，它被用于谷歌地图在其材料设计UI的结果列表中搜索位置。

我尝试了很多插件，他们中的大多数不支持所有的浏览器，我更喜欢iScroll和nanoScroller适用于所有这些浏览器:

Ie11 -> ie6 Ie10 - wp8 Ie9 - wp7 IE Xbox One IE Xbox 360 谷歌Chrome 火狐 歌剧 Safari

但iScroll不工作与触摸!

demo iScroll: http://lab.cubiq.org/iscroll/examples/simple/ 演示nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/

有一种方法可以将自定义滚动条应用于HTML文档中的自定义div元素。这里有一个有用的例子。https://codepen.io/adeelibr/pen/dKqZNb但作为一个要点。你可以这样做。

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

CSS文件是这样的。

.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;
}

我尝试了很多JS和CSS滚动，我发现这很容易使用，并在IE、Safari和FF上进行了测试，效果很好

正如@ theblufox所言

下面是它的工作原理

将下面的脚本添加到

<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>

在这段你需要滚动的地方

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

更多细节请访问插件页面

FaceScroll自定义滚动条

希望能有所帮助

和许多人一样，我在寻找的东西是:

在大多数现代浏览器中保持一致的样式和功能 不是一些可笑的3000行臃肿的jQuery扩展cr*p

.．.可是，唉——什么也没有!

如果一份工作值得做……我能够在大约30分钟内让一些东西运行起来。 免责声明:它有很多已知的(可能还有一些未知的)问题，但这让我想知道在许多产品中，其他2920行JS到底是为了什么!

(window => { let initCoords; const coords_update = e => { if (initCoords) { const elem = initCoords.bar.closest('.scrollr'); const eSuffix = initCoords.axis.toUpperCase(); const sSuffix = initCoords.axis == 'x' ? 'Left' : 'Top'; const dSuffix = initCoords.axis == 'x' ? 'Width' : 'Height'; const max = elem['scroll' + dSuffix] - elem['client' + dSuffix]; const room = elem['client' + dSuffix] - initCoords.bar['client' + dSuffix]; const delta = e['page' + eSuffix] - initCoords.abs; const abs = initCoords.p0 + delta; elem['scroll' + sSuffix] = max * abs / room; } }; const scrollr_resize = elem => { const xBar = elem.querySelector('.track.x .bar'); const yBar = elem.querySelector('.track.y .bar'); const xRel = elem.clientWidth / elem.scrollWidth; const yRel = elem.clientHeight / elem.scrollHeight; xBar.style.width = (100 * xRel).toFixed(2) + '%'; yBar.style.height = (100 * yRel).toFixed(2) + '%'; }; const scrollr_init = elem => { const xTrack = document.createElement('span'); const yTrack = document.createElement('span'); const xBar = document.createElement('span'); const yBar = document.createElement('span'); xTrack.className = 'track x'; yTrack.className = 'track y'; xBar.className = 'bar'; yBar.className = 'bar'; xTrack.appendChild(xBar); yTrack.appendChild(yBar); elem.appendChild(xTrack); elem.appendChild(yTrack); elem.addEventListener('wheel', scrollr_OnWheel); elem.addEventListener('scroll', scrollr_OnScroll); xTrack.addEventListener('wheel', xTrack_OnWheel); xTrack.addEventListener('click', xTrack_OnClick); xTrack.addEventListener('mouseover', () => xTrack.classList.add('active')); xTrack.addEventListener('mouseout', () => { if (!initCoords) xTrack.classList.remove('active'); }); yTrack.addEventListener('click', yTrack_OnClick); yTrack.addEventListener('mouseover', () => yTrack.classList.add('active')); yTrack.addEventListener('mouseout', () => { if (!initCoords) yTrack.classList.remove('active'); }); xBar.addEventListener('click', bar_OnClick); xBar.addEventListener('mousedown', xBar_OnMouseDown); yBar.addEventListener('click', bar_OnClick); yBar.addEventListener('mousedown', yBar_OnMouseDown); scrollr_resize(elem); }; window.addEventListener('load', e => { const scrollrz = Array.from(document.querySelectorAll('.scrollr')); scrollrz.forEach(scrollr_init); }); window.addEventListener('resize', e => { const scrollrz = Array.from(document.querySelectorAll('.scrollr')); scrollrz.forEach(scrollr_resize); }); window.addEventListener('mousemove', coords_update); window.addEventListener('mouseup', e => { initCoords = null; Array.from(document.querySelectorAll('.track.active')) .forEach(elem => elem.classList.remove('active')); }); function xBar_OnMouseDown(e) { const p0 = this.offsetLeft; initCoords = { axis: 'x', abs: e.pageX, bar: this, p0 }; } function yBar_OnMouseDown(e) { const p0 = this.offsetTop; initCoords = { axis: 'y', abs: e.pageY, bar: this, p0 }; } function bar_OnClick(e) { e.stopPropagation(); } function xTrack_OnClick(e) { const elem = this.closest('.scrollr'); const xBar = this.querySelector('.bar'); let unit = elem.clientWidth - 30; if (e.offsetX <= xBar.offsetLeft) unit *= -1; elem.scrollLeft += unit; } function yTrack_OnClick(e) { const elem = this.closest('.scrollr'); const yBar = this.querySelector('.bar'); let unit = elem.clientHeight - 30; if (e.offsetY <= yBar.offsetTop) unit *= -1; elem.scrollTop += unit; } function xTrack_OnWheel(e) { e.stopPropagation(); const elem = this.closest('.scrollr'); const left0 = elem.scrollLeft; const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX; elem.scrollLeft += delta; const moved = left0 !== elem.scrollLeft; if (moved) e.preventDefault(); } function scrollr_OnWheel(e) { const left0 = this.scrollLeft; const top0 = this.scrollTop; this.scrollLeft += e.deltaX; this.scrollTop += e.deltaY; const moved = left0 !== this.scrollLeft || top0 !== this.scrollTop; if (moved) e.preventDefault(); } function scrollr_OnScroll(e) { const xTrack = this.querySelector('.track.x'); const yTrack = this.querySelector('.track.y'); const xBar = xTrack.querySelector('.bar'); const yBar = yTrack.querySelector('.bar'); const xMax = this.scrollWidth - this.clientWidth; const yMax = this.scrollHeight - this.clientHeight; const xFrac = this.scrollLeft / xMax; const yFrac = this.scrollTop / yMax; const xAbs = xFrac * (this.clientWidth - xBar.clientWidth); const yAbs = yFrac * (this.clientHeight - yBar.clientHeight); xTrack.style.left = this.scrollLeft + 'px'; xTrack.style.bottom = -this.scrollTop + 'px'; xBar.style.left = xAbs + 'px'; yTrack.style.top = this.scrollTop + 'px'; yTrack.style.right = -this.scrollLeft + 'px'; yBar.style.top = yAbs + 'px'; }; })(window); .scrollr { overflow: hidden; position: relative; } .track { position: absolute; cursor: pointer; transition: background-color .3s; user-select: none; } .track.x { left: 0; bottom: 0; width: 100%; height: 10px; } .track.y { top: 0; right: 0; height: 100%; width: 10px; } .bar { position: absolute; background-color: yellow; transition: background-color .3s, opacity .3s, width .3s, height .3s, margin .3s; display: block; width: 100%; height: 100%; opacity: .7; } .track.x .bar { min-width: 25px; height: 3px; margin: 5px 0 2px 0; } .track.y .bar { min-height: 25px; width: 3px; margin: 0 2px 0 5px; } .track.active { background-color: #ccc; } .track.active .bar { background-color: #999; margin: 0; opacity: 1; } .track.x.active .bar { height: 10px; } .track.y.active .bar { width: 10px; } /* Custom client stuff */ .content { background: red; } .content p { width: 450px; margin: 0; } .scrollr { max-width: 350px; max-height: 150px; } <div class="scrollr content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p> <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem. Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p> <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum. Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p> <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem. Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p> <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum. Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p> <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem. Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p> <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum. Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p> <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem. Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p> <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum. Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p> <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem. Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p> <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum. Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p> <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem. Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p> <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum. Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p> </div>

Firefox新版本(64)支持CSS滚动条模块级别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>

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

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