スクロールバーのスタイルの変更は、さまざまなブラウザと互換性があります

参考サイト：https://nicescroll.areaaperta.com/demo/

参考文献：https://github.com/inuyaksa/jquery.nicescroll

スタイルを変更した後：

 

これらの手順を実行します。

<DIV ID = "boxscroll4">

  <DIV CLASS = "ラッパー"> </ div>

</ div>

 

書き込みCSS

<スタイルタイプ= "テキスト/ cssの">

  ＃boxscroll4 {

    高さ：300ピクセル;

    マージントップ：40ピクセル;

    背景色：＃00FF66;

    フォントファミリ：ジョージア、 "のTimes New Roman"、タイムズ、セリフ。

    フォントサイズ：18px;

    パディング：20ピクセル;

    オーバーフロー-Y：スクロール。

  }

  .wrapper {

    高さ：600PX。

    背景：赤;

  }

</スタイル>

jsが導入しました

<スクリプトSRC = "https://code.jquery.com/jquery-1.12.4.min.js"> </ SCRIPT>

<スクリプトSRC = "JS / jquery.nicescroll.min.js"> </ SCRIPT>

<スクリプト>

  $（ドキュメント）.ready（関数（）{

    $（ "＃1 boxscroll4"）niceScroll（ "＃boxscroll4 .wrapper"、{cursorborder： ""、cursorcolor： "" 緑、boxzoom：真}）。ラッパーを使用している場合// HWアクセラレーションが有効になって

  }）;

</ SCRIPT>