CSS自定义滚动条在div

我如何通过CSS(层叠样式表)为一个div而不是整个页面自定义滚动条?

当前回答

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

CHROME上的支持

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

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

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

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

DEMO

2013-07-03 10:26:53

其他回答

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

CHROME上的支持

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

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

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

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

DEMO

2013-07-03 10:26:53

我认为整合滚动条、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风格)

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

2013-01-04 03:12:54

.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

给了我一个漂亮的手机。

2017-03-28 12:41:25

我认为你必须对所有的滚动条使用::-wekbit-scrollbar，你可以使用:

<style>
.mydiv {
height:100px;
overflow:auto;
}
     /* width */
    .mydiv::-webkit-scrollbar {
      width: 20px;
    }
    
    /* Track */
    .mydiv::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey; 
      border-radius: 10px;
    }
     
    /* Handle */
    .mydiv::-webkit-scrollbar-thumb {
      background: red;
      border-radius: 10px;
    }
    
    /* Handle on hover */
    .mydiv::-webkit-scrollbar-thumb:hover {
      background: #b30000; 
    }
</style>
<body>
<div class="mydiv"> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div>
</body>

2020-10-20 15:20:46

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

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

2012-02-12 18:27:14

CSS自定义滚动条在div

推荐文章

最新文章

标签