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滾動條動態樣式

回答

相關問題