Question

我目前正在使用Webkit的:: - webkit-scrollbar CSS属性设置滚动条的样式，并希望在mousemove事件上更改这些属性。问题是我似乎找不到动态转到滚动条CSS的方法。

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

Answer 1

这个问题有一个很好的解决方法，您可以为滚动条添加多个具有diffident样式的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/

Answer 2

如果要在鼠标悬停时更改滚动条属性。你可以用CSS来做，这里有一个例子http://jsfiddle.net/olgis/7Lg2R/（抱歉丑陋的色彩）。

如果要在鼠标位于容器上方时更改滚动条颜色，请查看此帖子Style webkit scrollbar on certain state。无论有没有JavaScript，都有几种方法可以实现。

备注：我不知道为什么这些示例（CSS和JavaScript都没有）在我的Firefox 11 for Mint中不起作用，但所有这些都在Chrome 18.0.1025.151中完美运行。

Answer 3

我创建了包含四个标签的页面，每个标签都有不同的颜色设置以及滚动条但是这只能通过将类赋予正文标记

来实现

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";

ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image

Answer 4

是的，你可以做到。

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

您可以this plugin

执行此操作

如果您不需要使用jQuery - 您可以通过纯Javascript来完成： link 1 link 2。但是存在跨浏览器问题。

另见Setting CSS pseudo-class rules from JavaScript

Answer 5

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

Answer 6

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

这只是picking whichever one gives you the easiest API的问题。

Answer 7

你可以用<style>制作一个id="scrollbar_style"标签，然后像这样动态添加css：

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

请记住，在元素上使用 innerHTML 将不会添加您的新代码，还将删除该元素内的任何内容。

问题解决了。

Answer 8

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

更多信息：https://css-tricks.com/almanac/properties/s/scrollbar/

Webkit滚动条动态样式

8 个答案: