如何通过css更改滚动条样式

Posted 2023-04-04

现在写的这个css火狐都不识别 火狐浏览器可以通过css更改滚动条样式吗

我做项目开发已经几年了，我基本都不用css控制改变滚动条的样式，因为开发的时候，引入的一些框架就已经把滚动条的默认样式去掉了，并进行了美化，我现在用的是ZUI前端开发框架，引入框架的css和js页面出现滚动条的样子如下：

参考技术A 建议你贴图上来，因为出现原因的可能很多，比如代码格式不对或者代码位置放的不对再或者是css样式引用出错等等。 参考技术B 要各个浏览器自定义样式 只能用插件 参考技术C 不好弄，兼容性不好！弄出来效果也不能太理想

如何更改溢出 y 滚动条样式

【中文标题】如何更改溢出 y 滚动条样式

【英文标题】：How to change overflow y scrollbar styles

【发布时间】：2018-08-04 06:01:08

【问题描述】：

我使用以下样式应用了 overflov-y 滚动：

.custom #front_videos .large-2 
    height: 545px;
    overflow-y: scroll;
    position: relative;

像这样显示滚动 -> http://nimb.ws/XZ3RVS

我想像这样显示那个滚动条 -> http://nimb.ws/IGMnXl

所以任何人都知道如何使用 CSS 样式显示这样的滚动条然后重播我。

谢谢。

【参考方案1】：

我使用 ::-webkit-scrollbar 和它的兄弟选择器为您设计了一些看起来非常相似的样式。请注意，这仅适用于 Chromium 浏览器，因为滚动条不是 W3C 规范的一部分，因此在 Chrome 相对强大的伪选择器之外没有有效的选择器。

.large-2 
  margin-left: 30px;
  float: left;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
  width: 100px;
  background: #ccc;


.force-overflow 
  min-height: 450px;


.large-2::-webkit-scrollbar-track 
  border: 1px solid #000;
  padding: 2px 0;
  background-color: #404040;


.large-2::-webkit-scrollbar 
  width: 10px;


.large-2::-webkit-scrollbar-thumb 
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #737272;
  border: 1px solid #000;

<div class="custom">
  <div id="front_videos">
    <div class="large-2">
      <div class="force-overflow"></div>
    </div>
  </div>
</div>

有一个相对优雅的 JavaScript 解决方案，称为 NanoScroller - 虽然我个人对 if 没有太多经验，如果您正在寻找具有更多跨浏览器能力的东西。

【参考方案2】：

试试这个 sn-p。

::-webkit-scrollbar 
width: 20px;


::-webkit-scrollbar-track 
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;


::-webkit-scrollbar-thumb 
background:black; 
border-radius: 10px;


::-webkit-scrollbar-thumb:hover 
background:rgb(54, 56, 58); 

【讨论】：

尝试在上面加上sn-p -> overflow-y: auto;

【参考方案3】：

您可以使用 ::-webkit-scrollbar 前缀设置滚动条样式，但它仅适用于 webkit。

我认为你最好使用 "jquery.mCustomScrollbar.concat.min" 这个 jquery 插件。支持大部分浏览器。

【讨论】：

你能解释一下 jquery.mCustomScrollbar.concat.min JS。

对于“mCustomScrollbar”文档 ==> manos.malihu.gr/code-example/… 链接。如需演示，请查看此 ==> jsfiddle.net/wuj2v604 链接。

【参考方案4】：

试试这个：

::-webkit-scrollbar 
    width: 12px;


/* Track */
::-webkit-scrollbar-track 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;


/* Handle */
::-webkit-scrollbar-thumb 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

::-webkit-scrollbar-thumb:window-inactive 
    background: rgba(255,0,0,0.4);