web-dev-qa-db-ja.com

DivのCSSカスタマイズスクロールバー

ページ全体ではなく1つのdivに対して、CSS（Cascading Style Sheets）でスクロールバーをカスタマイズするにはどうすればよいですか？

csshtmlscrollbar
303
harisdev

スクロールバー、CSS、ブラウザの互換性に関する最新の情報をまとめると役立つと思いました。

スクロールバーCSSのサポート

現在のところ、ブラウザ間スクロールバーのCSSスタイル定義はありません。 W3Cの記事 最後に述べたのは次のような記述で、最近更新されました（2014年10月10日）：

一部のブラウザ（IE、Konqueror）は、標準以外のプロパティ 'scrollbar-shadow-color'、 'scrollbar-track-color'などをサポートしています。 これらのプロパティは違法です。これらはどのCSS仕様でも定義されておらず、（ "-vendor-"を前に付けることで）プロプライエタリとしてマークされてもいません

マイクロソフト

他の人が言っているように、マイクロソフトはスクロールバーのスタイルをサポートしていますが、それはIE 8以上でのみです。

例：

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

Chrome＆Safari（WebKit）

同様に、WebKitにも独自のバージョンがあります。

Firefox（Gecko）

バージョン64の時点でFirefoxはプロパティscrollbar-color（部分的に、 W3Cドラフト ）とscrollbar-width（ W3Cドラフト ）を通してスクロールバースタイルをサポートします。実装に関するいくつかの良い情報は この答え にあります。

クロスブラウザスクロールバースタイリング

JavaScriptライブラリとプラグインは、クロスブラウザソリューションを提供できます。多くの選択肢があります。

リストは続けることができます。最善の策は、利用可能なソリューションを検索し、調査し、テストすることです。私はあなたがあなたのニーズに合うものを見つけることができるだろうと確信しています。

違法なスクロールバーのスタイリングを防止する

念のため "-vendor"の接頭辞が付いていないスクロールバーのスタイル設定を避けたい場合は、 このW3C以降の記事で基本的な手順を説明しています 。基本的には、ブラウザに関連付けられているユーザースタイルシートに次のCSSを追加する必要があります。これらの定義はあなたが訪れるどんなページでも無効なスクロールバースタイルを上書きするでしょう。

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

重複または類似の質問/出典が上記にリンクされていない

注：この回答にはさまざまな情報源からの情報が含まれています。ソースが使用されていた場合は、この回答にもリンクされています。

661
JSuar

これを試してみる

ソース： http://areaaperta.com/nicescroll/ /

簡単な実装

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

これはjQueryプラグインのスクロールバーなので、スクロールバーは制御可能で、さまざまなOSで同じように見えます。

12
Dilusha Gonagala

カスタムスクロールバーはCSSでは使えません。JavaScriptの魔法が必要です。

Webkitの::-webkit-scrollbarなど、一部のブラウザは仕様外のCSSルールをサポートしていますが、Webkitでしか機能しないため理想的ではありません。 IEもそのようなものを持っていました、しかし私は彼らがもうそれをサポートするとは思わない。

10
elclanrs

私はこのスレッドに欠けていることが1つあると思います。あなたが万が一プラグインを介してスクロールを実装したい場合は、はるかに2014年に最高のものは スライ です。

これは純粋なJavaScriptのスクロールバーなので、スクロールバーは制御可能で、さまざまなOSで同じように見えます。

それは最高の性能と機能を持っています。他にも近づいていません。無数のハーフベイクバグの他のライブラリから選択するのに時間を無駄にしないでください。

8
Capaj

多くの人と同じように、私は何かを探していました：

  • 最近のほとんどのブラウザで一貫したスタイルと機能
  • とんでもない3000行の肥大化したjQuery拡張機能cr * pはない

...しかし悲しいかな - 何もない！

仕事がやりがいのあることであれば...私は約30分で何かを起動して実行することができました。免責事項：それにはかなりの数の既知の（そしておそらく未知の数種類の）問題がありますが、他の2920行のJSが多くの製品に存在するのは不思議に思います！

var dragParams;
        window.addEventListener('load', init_myscroll);

        /* TODO: Much to do for v axis! */

        function bardrag_mousemove(e) {
          var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
          pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
          dragParams.slider.style.left = pos + 'px';
          updateScrollPosition(dragParams.slider, pos);
        }

        function updateScrollPosition(slider, offsetVal) {
          var bar = slider.parentNode;
          var myscroll = bar.parentNode;
          var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
          var maxSlide = bar.offsetWidth - slider.offsetWidth;
          var viewX = maxView * offsetVal / maxSlide;
          myscroll.scrollLeft = viewX;
          bar.style.left = viewX + 'px';
        }

        function drag_start(e) {
          var slider = e.target;
          var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
          dragParams = {
            clientX: e.clientX,
            offsetLeft: slider.offsetLeft,
            slider: e.target,
            maxLeft: maxLeft
          };
          e.preventDefault();
          document.addEventListener('mousemove', bardrag_mousemove);
        }

        function drag_end(e) {
          e.stopPropagation();
          document.removeEventListener('mousemove', bardrag_mousemove);
        }

        function bar_clicked(e) {
          var bar = e.target;
          var slider = bar.getElementsByClassName('slider')[0];
          if (bar.className == 'h bar') {
            var maxSlide = bar.offsetWidth - slider.offsetWidth;
            var sliderX = e.offsetX - (slider.offsetWidth / 2);
            sliderX = Math.max(0, Math.min(sliderX, maxSlide));
            slider.style.left = sliderX + 'px';
            updateScrollPosition(slider, sliderX);
          }
        }

        function init_myscroll() {
          var myscrolls = document.getElementsByClassName('container');
          for (var i = 0; i < myscrolls.length; i++) {
            var myscroll = myscrolls[i];
            var style = window.getComputedStyle(myscroll);
            if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
              addScroller(false, myscroll);
            }
            if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
              addScroller(true, myscroll);
            }
          }
        }

        function addScroller(isX, myscroll) {
          myscroll.className += ' myscroll';
          var bar = document.createElement('div');
          var slider = document.createElement('div');
          var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
          var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
          var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
          slider.style.width = 100 * sliderPx / offsetDim + '%';
          slider.className = 'slider';
          bar.className = isX ? 'h bar' : 'v bar';
          bar.appendChild(slider);
          myscroll.appendChild(bar);

          bar.addEventListener('click', bar_clicked);
          slider.addEventListener('mousedown', drag_start);
          slider.addEventListener('mouseup', drag_end);
          bar.addEventListener('mouseup', drag_end);
          document.addEventListener('mouseup', drag_end);
        }
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>
5
ne1410s

私はたくさんのプラグインを試してみました、それらのほとんどはすべてのブラウザをサポートしているわけではありません、私は iScroll と nanoScroller がこれらすべてのブラウザで動作することを好みます：

  • IE11 - > IE6
  • IE10 - WP8
  • IE9 - WP7
  • IE Xbox One
  • IE Xbox 360
  • グーグルクローム
  • FireFox
  • オペラ
  • サファリ

しかし iScrollはタッチでは動作しません！

デモiScroll： http://lab.cubiq.org/iscroll/examples/simple/
デモnanoScroller： http://jamesflorentino.github.io/nanoScrollerJS/

5
Ouadie

このリンクを確認してください。実演デモの例

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSSスクロールバー

4
user7005809

これはChromeとSafariで動作するWebキットの例です。

CSS： 

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

出力：

enter image description here

3
Denys Wessels

ちなみに、これはグーグルが昔からそのアプリケーションのいくつかで使っているものです。あなたが次のクラスを適用するなら、それらがどうにかクロムでスクロールバーを隠すが、それはまだうまくいくことをjsfiddleにチェックインしてください。

jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark

http://jsfiddle.net/76kcuem0/32/ /

スクロールバーから矢印を削除すると便利です。 2015年の時点で、それは材料設計のUIで結果のリスト内の場所を検索するときにmaps.google.comで使用されています。

2
le0diaz

私はたくさんのJSやCSSのスクロールを試してみましたが、これは非常に使いやすくIEとSafariとFFでテストしてうまく動いたと思いました

AS @thebluefoxからの示唆

これがどのように機能するかです。

以下のスクリプトを に追加します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

そして、これはあなたがスクロールする必要がある段落の中です

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

詳細はプラグインページをご覧ください。

FaceScrollカスタムスクロールバー

それが役に立てば幸い

1
Yousef Altaf

Firefoxの新バージョン（64）はCSS Scrollbars Module Level 1をサポートする

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

ソース： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Firefox scrollbar

https://codepen.io/fatihhayri/pen/pqdrbd

1
Fatih Hayrioğlu

Webkitのスクロールバーはほとんどのブラウザをサポートしていません。

CHROMEをサポート

これはwebkit scrollbar Webkit Scrollbar DEMO のデモです。

もっと多くの例を探しているならこれをチェックしなさい その他の例

別の方法は Jquery Scroll Bar Plugin

すべてのブラウザに対応しており、簡単に適用できます。

ここからダウンロード からプラグインをダウンロードしてください。

使用方法およびその他のオプション これをチェック

デモ

1
Nikz
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

私のような素敵な携帯電話/ osをください。

1
csomakk

HTML文書のカスタムdiv要素にカスタムスクロールバーを適用する方法があります。これは役立つ例です。 https://codepen.io/adeelibr/pen/dKqZNb しかしそれの要旨として。あなたはこのようなことをすることができます。

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

CSSファイルはこんな感じです。

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

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

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
1
Adeel Imran