当前位置：文江博客话题详情

Webkit滚动条动态样式

发布于 2024-10-19 17:04:42 字数 167 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

隔岸观火 2024-10-26 17:04:43

是的，你可以做到。

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

你可以通过这个插件来做到这一点

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

另请参阅从 JavaScript 设置 CSS 伪类规则

回复收藏 0 原文

穿透光 2024-10-26 17:04:43

如果您想在鼠标悬停在滚动条上时更改滚动条属性。您可以使用 CSS 来完成此操作，这里有一个示例 http://jsfiddle.net/olgis/7Lg2R/（抱歉颜色设置丑陋）。

如果您想在鼠标悬停在容器上方时更改滚动条颜色，请查看这篇文章样式特定状态下的 webkit 滚动条。描述了使用或不使用 JavaScript 的几种方法。

备注：我不知道出于什么原因，这些示例（使用 CSS 和 JavaScript）都不能在我的 Firefox 11 for Mint 中工作，但它们都在 Chrome 18.0.1025.151 中完美工作。

回复收藏 0 原文

天赋异禀 2024-10-26 17:04:43

我创建了带有四个选项卡的页面，每个选项卡都有不同的颜色设置以及滚动条
提供类到 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">

然而，这只能通过为每个选项卡按钮

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

javascript 来实现（此处仅显示滚动条部分） ScreenShot1 GreenScrollBar 图片
 ScreenShot2 蓝色滚动条图像

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 原文

-小熊_ 2024-10-26 17:04:43

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

只需选择为您提供最简单 API 的一个即可。

回复收藏 0 原文

舂唻埖巳落 2024-10-26 17:04:43

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

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.

        ::-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;
        }

Demo: http://geryit.com/lib/custom-css3-scrollbars

Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

回复收藏 0 原文

寂寞清仓 2024-10-26 17:04:43

您可以使用 id="scrollbar_style" 制作

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

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

问题解决了。

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :

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

just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.

problem solved.

回复收藏 0 原文

策马西风 2024-10-26 17:04:43

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

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 原文

陈甜 2024-10-26 17:04:42

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

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 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

Webkit滚动条动态样式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

Webkit滚动条动态样式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。