有一种方法可以将自定义滚动条应用于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;
}

对于使用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;
  }
}

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

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

有一种方法可以将自定义滚动条应用于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;
}

下面是一个适用于Chrome和Safari的webkit示例:

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

输出:

我尝试了很多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自定义滚动条

希望能有所帮助