web-dev-qa-db-ja.com

オーバーフローyスクロールバーのスタイルを変更する方法

私は次のスタイルを使用してoverflov-yスクロールを適用しました：

.custom #front_videos .large-2 {
    height: 545px;
    overflow-y: scroll;
    position: relative;
}

このような表示スクロール-> http://nimb.ws/XZ3RVS

このようにスクロールバーを表示したい-> http://nimb.ws/IGMnXl

だから誰でも、CSSスタイルを使用してこのようなスクロールバーを表示し、再生する方法を知っています。

ありがとう。

csswordpressscrollviewscrollbaroverflow
6
Ketan

::-webkit-scrollbarを使用してかなり似ているいくつかのスタイルを作成しました。これは兄弟セレクターです。スクロールバーはW3C仕様の一部ではないため、Chromeの比較的堅牢な疑似セレクター以外の有効なセレクターがないため、これはChromiumブラウザーのみに注意してください。

.large-2 {
  margin-left: 30px;
  float: left;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 25px;
  width: 100px;
  background: #ccc;
}

.force-overflow {
  min-height: 450px;
}

.large-2::-webkit-scrollbar-track {
  border: 1px solid #000;
  padding: 2px 0;
  background-color: #404040;
}

.large-2::-webkit-scrollbar {
  width: 10px;
}

.large-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #737272;
  border: 1px solid #000;
}
<div class="custom">
  <div id="front_videos">
    <div class="large-2">
      <div class="force-overflow"></div>
    </div>
  </div>
</div>

NanoScroller と呼ばれる比較的優雅なJavaScriptソリューションがあります。ただし、クロスブラウザー機能を備えた何かを探している場合、私はifについてあまり経験がありません。

4
Xhynk

このスニペットを試してください。

::-webkit-scrollbar {
width: 20px;
}

::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background:black; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background:rgb(54, 56, 58);

}

1
Nick.K

::-webkit-scrollbarプレフィックスを使用してスクロールバーのスタイルを設定できますが、Webkitでのみ機能します。

"jquery.mCustomScrollbar.concat.min"このjqueryプラグイン。ほとんどのブラウザをサポートしています。

1
Anzil khaN

これを試して：

::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}
0
m b k