スクロールバーのデザインを変更＆ hover時のみ表示

やりたい事

スクロールバーのデザインを変更したい
hover時だけスクロールバーを出したい

やってみる

.wrapが親要素
.boxが子要素

.wrapにpadding入れてるので、
.boxからはみ出してる部分をoverflow: hidden;で隠して
.boxにhoverしてる時だけ、スクロールバーを表示。

このページ本体のスクロールバーは通常通り。

index.html

<div class="wrap">
  <div class="box">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

style.scss

.wrap {
   height: 500px;
   padding: 60px 40px;
   .box {
    overflow: hidden;
    &:hover {
      overflow: scroll;
      &::-webkit-scrollbar {
       width: 6px;
       height: 0;
      }
      &::-webkit-scrollbar-track {
        border-radius: 3px;
        height: 100%;
        background-color: #eeeeee;
      }
      &::-webkit-scrollbar-thumb {
       border-radius: 3px;
       background-color: #867670;
     }
  }
}

このやり方でスクロールバーの変更しても、
IEやfirefoxで対応してないので意味がない事を知る。悲しい。

次に試した事

perfect-scrollbar.js

perfect-scrollbar.jsを使えばできるらしい。

参考↓

http://cly7796.net/wp/javascript/plugin-perfect-scrollbar/
https://webkcampus.com/201903/1578/

だいたいこんな感じ。

index.html

<div class="wrap">
  <div class="scrollbar">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="scrollbar2">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="scrollbar3">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>
...
...
...
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>
<script>
  var matches = document.querySelectorAll(".scrollbar");
  var ps = new PerfectScrollbar('.scrollbar');
  var ps = new PerfectScrollbar('.scrollbar2');
  var ps = new PerfectScrollbar('.scrollbar3');
  var ps = new PerfectScrollbar('.scrollbar'){
    suppressScrollX: true
  };
</script>

style.css

.scrollbar {
    position: relative;
    width: 400px;
    height: 400px;
}
.scrollbar2 {
    position: relative;
    width: 400px;
    height: 400px;
}
.scrollbar3 {
    position: relative;
    width: 400px;
    height: 400px;
}
.ps__thumb-y {
    background-color: #fd284c!important;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
    background-color: red;
}

(色々変更したのでちょっと違うかも)

これだど、.scrollbar1つ1つに違う名前のclass名つけて、cssやjsの指定をしなきゃいけない。
今回の場合はwordpressで.scrollbarの要素を追加・更新する予定なので、違うclass名をつけて、、、、以降ができないため、やめました。

他の方法

↓
simplebar.js : https://arakaze.ready.jp/archives/5196
nanoScroller.js : http://jamesflorentino.github.io/nanoScrollerJS/
CustomScrollbar.js : http://eturlt.net/blog/20130612/customscrollbar/

この3つ。
・simplebar.jsはそもそもスクロールバーが表示されない問題。
・nanoScroller.jsはちょっと古い。
・CustomScrollbar.jsでできました。
デモもあるし、カスタマイズしやすいので使用しやすかった
↓
https://www.otwo.jp/blog/custom-scroller/

まとめ

スクロールバーでも色々あるんだなぁと思いました。