对于使用sass的人来说，这里是一个具有基本功能(拇指，轨道颜色和宽度)的mixin。我没有广泛地测试它，所以请随意指出任何错误。

@mixin element-scrollbar($thumb-color, $background-color: mix($thumb-color, white,  50%), $width: 1rem) {
  // For Webkit
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
  }

  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $thumb-color;
    scrollbar-arrow-color: $thumb-color;
    scrollbar-track-color: $background-color;
  }

  // For Firefox future compatibility
  // This is W3C draft and does not work yet. Use html-firefox-scrollbar mixin instead.
  & {
    scrollbar-color: $thumb-color $background-color;
    scrollbar-width: $width;
  }
}

// For Firefox
@mixin html-firefox-scrollbar($thumb-color, $background-color: mix($thumb-color, white,  50%), $firefox-width: this) {
  // This must be used on html/:root element to take effect
  & {
    scrollbar-color: $thumb-color $background-color;
    scrollbar-width: $firefox-width;
  }
}

Webkit滚动条在大多数浏览器上不支持。

CHROME上的支持

这是一个webkit scrollbar demo 如果你正在寻找更多的例子，请检查这个更多的例子

另一种方法是Jquery滚动条插件

它支持所有浏览器，易于应用

从这里下载插件 如何使用和更多的选项检查这个

DEMO

请检查这个链接。带有工作演示的示例

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

CSS滚动条

我认为整合滚动条、CSS和浏览器兼容性方面的最新信息会很有帮助。

CSS支持滚动条

目前，还不存在跨浏览器滚动条CSS样式定义。我在最后提到的W3C文章有以下声明，最近更新了(2014年10月10日):

一些浏览器(IE, Konqueror)支持'scrollbar-shadow-color'， 'scrollbar-track-color'等非标准属性。这些属性是非法的:它们既没有在任何CSS规范中定义，也没有被标记为专有属性(通过在它们前面加上“-vendor-”)。

微软

正如其他人提到的，微软支持滚动条样式，但仅限于IE8及以上版本。

例子:

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

同样，WebKit现在也有了自己的版本:

Styling scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/ Demo of all WebKit scroll bar styling From Custom scrollbars in WebKit, relevant CSS: /* pseudo elements */ ::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { } ::-webkit-resizer { } /* pseudo class selectors */ :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive

Firefox(壁虎)

从版本64开始，Firefox通过属性scrollbar-color(部分，W3C草案)和scrollbar-width (W3C草案)支持滚动条样式化。在这个答案中可以找到一些关于实现的有用信息。

跨浏览器滚动条样式

JavaScript库和插件可以提供跨浏览器的解决方案。有很多选择。

20 jQuery滚动条插件示例(2012年7月24日) NiceScroll: jQuery滚动插件桌面，移动和触摸设备 jQuery自定义内容滚动 一个轻量级的jQuery插件 等。 30+ JavaScript/Ajax技术用于滑块，滚动条和滚动条(2008年5月7日) 21实用的滚动条CSS/JavaScript样式教程(2012年8月) 15+免费和高级jQuery滚动插件(2012年8月26日)

这样的例子不胜枚举。最好的办法是到处搜索、研究和测试可用的解决方案。我相信你一定能找到符合你需要的工作。

防止非法滚动条样式

为了防止滚动条样式没有正确地加上前缀“-vendor”，W3C的这篇文章提供了一些基本说明。基本上，您需要将以下CSS添加到与浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上无效的滚动条样式。

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

重复或相似的问题/上面没有链接的来源

改变滚动条的样式 CSS滚动条样式跨浏览器 如何在div上创建自定义滚动条(Facebook风格)

注意:这个答案包含了不同来源的信息。如果使用了一个源，那么它也会在这个答案中被链接。

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

在大多数现代浏览器中保持一致的样式和功能 不是一些可笑的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>

自定义滚动条无法使用CSS，您需要一些JavaScript魔法。

有些浏览器支持非规范的CSS规则，比如Webkit中的::-webkit-scrollbar，但这并不理想，因为它只能在Webkit中工作。IE也有类似的东西，但我认为他们不再支持它了。