Webkit scrollbar dynamic styling

后端未结

关注

 8  1790

I\'m currently styling the scrollbar using Webkit\'s ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I

相关标签:

8条回答

名媛妹妹

2021-01-04 00:21
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.

Example:
```
.red::-webkit-scrollbar  { ... }
.blue::-webkit-scrollbar { ... }
```
A button that toggles between the classes red and blue:
```
$("#changecss").on("click", function(){
    $(".red,.blue").toggleClass("red").toggleClass("blue");
});
```
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
0 讨论(0)
发布评论:

提交评论
- 加载中...
傲寒

2021-01-04 00:23

For this you should replace the scrollbar altogether.

It's just a matter of picking whichever one gives you the easiest API.

0 讨论(0)
发布评论:

提交评论
- 加载中...
梦毁少年i

2021-01-04 00:27

Yes, you can do it.

You need to include dynamically css style rule into stylesheet. And then to change it.

You can do it by this plugin

If you don't need to use jQuery - you can do it by pure Javascript: link 1 link 2. But there is cross-browser problems.

Also see Setting CSS pseudo-class rules from JavaScript

0 讨论(0)
发布评论:

提交评论
- 加载中...
无人及你

2021-01-04 00:27
you can define a function in JavaScript with your own css.
```
function overFlow(el) {
   el.style.cssText = "overflow: auto;";
}
```
using in html:
```
<style>
::-webkit-scrollbar{display = none;}
</style>

<div id="overFlow" onclick="overFlow(this);">Something</div>
```
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2021-01-04 00:29

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).

If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.

REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

0 讨论(0)
发布评论:

提交评论
- 加载中...

天涯浪人

2021-01-04 00:39

i created page with four tabs each different color set as well as scroll bar however this only worked by giving class to body tag

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 for each tab button(only scroll bar section shown here)

document.getElementById("body").className="greenody";
.........other function().... 
document.getElementById("body").className="bluebody";

ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image

0 讨论(0)

1 2 下一页