我目前正在使用Webkit的 ::-webkit-scrollbar CSS 属性美化滚动条，并希望在鼠标移动事件中更改这些属性。问题是我似乎找不到一种动态获取滚动条CSS的方法。
是否可以通过JavaScript（可能使用jQuery）动态地样式化Webkit滚动条？
8个回答
11
有一个很好的解决方法，您可以添加具有不同样式的多个 CSS 类来处理滚动条问题，然后使用 JavaScript 动态更改这些类。
示例：
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
一个可以在 red 和 blue 之间切换的按钮：
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
这是一个可用的代码示例：http://jsfiddle.net/promatik/wZwJz/18/
- António Almeida
1
1我在强制重绘时遇到了问题，但是在你的fiddle中找到了解决方法。如果其他人需要寻找此问题的解决方案，可以通过更新
overflow的值并获取页面的高度来解决。document.body.style.overflow = 'hidden';
document.body.offsetHeight;
document.body.style.overflow = 'auto'; - Aleksey Pastuhov3
如果您想在鼠标悬停时更改滚动条属性，可以使用CSS来实现。下面是一个示例链接：http://jsfiddle.net/olgis/7Lg2R/。（对于丑陋的颜色设置表示抱歉）
如果您想要改变容器上的滚动条颜色，当鼠标经过时，则可以查看这篇帖子Style webkit scrollbar on certain state。其中描述了几种方法来实现此目的，有些需要JavaScript，有些则不需要。
注意：我不知道为什么这些示例（包括CSS和JavaScript）都不能在我的Firefox 11 for Mint上运行，但它们在Chrome 18.0.1025.151上完美地工作。
如果您想要改变容器上的滚动条颜色，当鼠标经过时，则可以查看这篇帖子Style webkit scrollbar on certain state。其中描述了几种方法来实现此目的，有些需要JavaScript，有些则不需要。
注意：我不知道为什么这些示例（包括CSS和JavaScript）都不能在我的Firefox 11 for Mint上运行，但它们在Chrome 18.0.1025.151上完美地工作。
- olgis
2
我创建了一个带有四个选项卡的页面，每个选项卡都有不同的颜色设置，以及滚动条。然而，这只能通过给body标签添加类来实现。
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
JavaScript用于每个选项卡按钮(这里只显示滚动条部分)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
- SparkShredder
3
这就是你所有的HTML代码吗？你可能需要深入了解一些HTML和CSS基础知识，因为看起来你不熟悉使用基本的CSS来应用固定高度并滚动其他元素内的内容。总之，在这个问题中有很多未被提及的问题。 - SEoF
嗯，我对这个非常新。只是把它当作“消磨时间”的方式。而且我没有主题可以工作...所以我只是在自己身上做了一个文档。并使其几乎兼容移动设备（在我的设备上测试）和平板电脑（使用Chrome开发工具测试）。 - SparkShredder
1
你可以使用自己的CSS在JavaScript中定义函数。
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
在HTML中使用：
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
- Hello Hack
1
你可以使用CSS3来样式化滚动条，这通常只适用于内部滚动条而不是实际的浏览器主滚动条。你也可以在以下内容中添加MOZ属性。
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
演示：http://geryit.com/lib/custom-css3-scrollbars
下载源代码：http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
- matt
1
因此，您应该彻底更换滚动条。
只是选择最容易使用 API 的那个而已。
- Silviu-Marian
2
感谢您的贡献！但不幸的是，我个人不想使用jQuery。 - Sebas
4原问题中提到了“可能使用jQuery”的内容。 - Silviu-Marian
1
你可以创建一个id为"scrollbar_style"的
- mdnfiras
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
scrollbar-width: 0应用于 body 或 HTML 标签（我发现我必须在 HTML 标签上执行此操作）。这可以使用JS轻松完成，通过为body或HTML元素添加内联样式的 .style 属性即可。 - Lushawn