Webkit滚动条动态样式

我目前使用Webkit :: - webkit-scrollbar CSS属性设计滚动条，并且想要更改mousemove事件的这些属性。问题是，我似乎无法找到一种方式来动态获取滚动条的CSS。Webkit滚动条动态样式

是否有可能通过javascript（可能使用jQuery）动态设计webkit滚动条？

2011-03-02 rcabaco

可能这可以帮助..插入式的动态插入身体上的鼠标移动事件http://stackoverflow.com/questions/1212500/jquery-create -css-rule-class-runtime – Amitd 2012-07-14 11:19:11

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

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

来源

2012-07-14 00:29:12

感谢您的贡献！但不幸的是，我个人不想使用jQuery。 – Sebas 2012-07-14 00:37:18

@Sebas原始问题sais'“可能使用jQuery”' – 2012-07-14 00:40:32

yes，* possible *。感谢您的贡献！ – Sebas 2012-07-14 01:29:28

是的，你可以做到。

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

您可以通过this plugin

做，如果你不需要使用jQuery - 您可以通过纯JavaScript做到这一点： link 1 link 2。但是有跨浏览器的问题。

另见Setting CSS pseudo-class rules from JavaScript

来源

2012-07-14 11:07:27 Rustam

谢谢，我不喜欢它，我不会使用它，但这确实是目前唯一的解决方案。 – Sebas 2012-07-14 13:45:45

如果你想改变一个滚动条属性，当鼠标移动到它。你可以用CSS来做，这里有一个例子http://jsfiddle.net/olgis/7Lg2R/（对于丑陋的颜色，抱歉）。

如果你想改变滚动条的颜色，如果鼠标在一个容器上，然后看看这个职位Style webkit scrollbar on certain state。描述了使用和不使用JavaScript的几种方法。备注：我不知道为什么这些原因（使用CSS既不是JavaScript），也不会在我的Firefox 11 for Mint中工作，但所有这些例子在Chrome 18.0.1025.151中都能很好地工作。

来源

2012-08-13 14:54:14 olgis

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

来源

2012-08-14 18:38:43 matt

有一个很好的办法解决这个问题，你可以添加多个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/

来源

2013-03-24 20:02:54

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

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

只记得使用innerHTML的元素的将不只是ADD新的代码，它也会删除无论是元素中。

问题解决。

来源

2015-07-26 11:26:28

我创建的页面有四个选项卡每个不同的颜色设置以及滚动条然而，这只是通过给类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 for each tab button（only scroll bar section shown her E）

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

ScreenShot1 GreenScrollBar Image ScreenShot2 BlueScrollBar Image

来源

2018-03-06 13:16:18 SparkShredder

这就是你所有的HTML？您可能需要考虑阅读更多HTML和CSS基础知识，因为看起来您不熟悉基本CSS来应用固定高度并在其他元素中滚动内容。最终，这个问题中有很多未被问及的问题。 – SEoF 2018-03-06 13:27:42

嗯，我对这个真的很新。只是把它当做“时间通过”而已。而且我没有受制于......所以我只是编写了一份关于我自己的文档。并且使它几乎与移动设备（在我的测试版）和选项卡（经过测试的开发工具）兼容。 – SparkShredder 2018-03-07 12:36:51

[Rajnoor Brar]（https://drive.google.com/open?id=1mFVqZMyJbU1OrpB3oZDAi0vG8pNzDnjz）那么，这是整个网络（.zip）的链接。请查看它。不仅仅是满足眼睛。 @SEoF – SparkShredder 2018-03-07 14:55:30

Webkit滚动条动态样式

回答

相关问题