仅在一个 div 中自定义滚动条答案

【问题标题】：Custom scrollbar only in one div仅在一个 div 中自定义滚动条
【发布时间】：2016-10-27 16:41:01
【问题描述】：

我想在 Chrome 中有一个自定义滚动条。

所以，我正在使用这个 sass：

::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.1);
  border-radius: 3px;

  &:hover {
    background: rgba(255,255,255,.2);
  }
}

我的问题是我只想在特定的 div 中使用这种滚动条样式。但如果我这样做：

#boardslist {

  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.1);
    border-radius: 3px;

    &:hover {
      background: rgba(255,255,255,.2);
    }
  }

}

不工作。有什么想法吗？

【问题讨论】：

您可以使用fakeScroll（原版轻量级脚本）更好地自定义它

标签： html css scrollbar

【解决方案1】：

现在是 2020 年，Firefox 仍然不支持 ::-webkit-scrollbar。除了overflow:auto 在 Chrome 和 Safari 中内容溢出时会显示滚动条，但在 Firefox 中，直到我们开始滚动才会有可见的滚动条。去猜测内容是否可滚动。与overflow:scroll 相同。不是很直观。

【讨论】：

【解决方案2】：

如果你是为一堂课做的，你可以通过以下方式来做。侧栏是赋予您希望允许滚动的 div 的类。

.side_bar{
    padding-right: 20px; 
    margin-left: -12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: scroll;
    /* width */

}
.side_bar::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
.side_bar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px grey; 
        border-radius: 10px;
    }

    /* Handle */
.side_bar::-webkit-scrollbar-thumb {
        background: rgb(7, 7, 7); 
        border-radius: 10px;
    }

    /* Handle on hover */
.side_bar::-webkit-scrollbar-thumb:hover {
        background: #009eb3; 
    }

【讨论】：

【解决方案3】：

#boardslist {

  &::-webkit-scrollbar {
   width: 0.5em;
   height: 0.5em;
  }

  &::-webkit-scrollbar-thumb {
   background-color: rgba(255,255,255,.1);
   border-radius: 3px;

   &:hover {
    background: rgba(255,255,255,.2);
   }
  }
}

看看这个http://codepen.io/tholman/pen/tldwm

【讨论】：

但你似乎无法在 iOS Safari 上以正确的方式拖动滚动条（或单击箭头）。
如果能添加一个关于为什么这也有效的解释会很好。