Javascript Webkit滚动条动态样式

我目前正在使用Webkit的：：-Webkit滚动条CSS属性设置滚动条的样式，并希望在mousemove事件中更改这些属性。问题是我似乎找不到一种方法来动态访问滚动条的CSS

---

是否可以通过javascript（可能使用jQuery）动态设置webkit滚动条的样式？

为此，您应该完全替换滚动条

这只是时间的问题。

是的，你能做到

您需要在样式表中动态地包含css样式规则。 然后改变它

你可以自己做

如果您不需要使用jQuery，可以使用纯Javascript： . 但存在跨浏览器问题

---

如果要在鼠标悬停在滚动条上时更改滚动条属性，请参见。您可以使用CSS来实现这一点，这里是一个示例（对不起，颜色集太难看了）

如果你想改变滚动条的颜色，如果鼠标在一个容器上，那么看看这篇文章。这里描述了几种方法，包括使用和不使用JavaScript

---

备注：我不知道是什么原因导致这些示例（CSS和JavaScript）都不能在我的Firefox11 for Mint中运行，但它们都能在Chrome 18.0.1025.151中完美运行。

您可以使用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;
        }

演示：

---

下载源：

对于这个问题有一个很好的解决方法，您可以为滚动条添加多个具有不同样式的css类，然后使用Javascript动态更改这些类

例如：

.red::-webkit-scrollbar  { ... }
.blue::-webkit-scrollbar { ... }

在类

红色

和

蓝色

之间切换的按钮：

$("#changecss").on("click", function(){
    $(".red,.blue").toggleClass("red").toggleClass("blue");
});

这是一个工作提琴：

您可以使用

id=“scrollbar\u style”

创建一个

标记，然后在其中动态添加css，如下所示：

document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';

请记住，对元素使用innerHTML不仅会添加新代码，还会删除该元素中的任何内容

---

问题解决。

我创建了一个包含四个选项卡的页面，每个选项卡都有不同的颜色设置以及滚动条 然而，这只能通过将类赋予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"); 
}

/

html

---

您可以使用自己的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>

：-webkit滚动条{display=none；}
某物

---

更多信息：

感谢您的贡献！但不幸的是，我个人并不想使用jQuery。@Sebas最初的问题是“可能使用jQuery”谢谢，我不喜欢它，也不会使用它，但这确实是目前唯一的解决方案。也许这会有所帮助。。在鼠标移动时将样式动态插入到主体中，这是所有HTML吗？您可能希望阅读更多的HTML和CSS基础知识，因为您似乎不熟悉基本CSS，无法应用固定高度并在其他元素中滚动内容。最后，这个问题中有很多未问的问题。嗯，我对这个问题真的很陌生。只是作为“时间流逝”来做。而且我没有要研究的课题。。。因此，我自己编写了一份文档，并使其与手机（在我的手机上测试过）和标签（在chrome开发工具上测试过）几乎兼容。这是指向整个web（.zip）的链接。请查看。这不只是我们所看到的@SEoFI对force重画有异议，我在你的小提琴上发现了。如果有人会寻找它，黑客就是更新

overflow

的值并获得身体的高度<代码>document.body.style.overflow='hidden'

document.body.offsetHeight
document.body.style.overflow='auto'
document.getElementById("body").className="greenody";
.........other function().... 
document.getElementById("body").className="bluebody";

function overFlow(el) {
   el.style.cssText = "overflow: auto;";
}

<style>
::-webkit-scrollbar{display = none;}
</style>

<div id="overFlow" onclick="overFlow(this);">Something</div>