やりたい事
スクロールバーのデザインを変更したい
hover時だけスクロールバーを出したい
やってみる
.wrapが親要素
.boxが子要素
.wrapにpadding入れてるので、
.boxからはみ出してる部分をoverflow: hidden;で隠して
.boxにhoverしてる時だけ、スクロールバーを表示。
このページ本体のスクロールバーは通常通り。
<divclass="wrap"><divclass="box"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div>.wrap{height:500px;padding:60px40px;.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/
だいたいこんな感じ。
<divclass="wrap"><divclass="scrollbar"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="scrollbar2"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="scrollbar3"><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div>
...
...
...
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script><script>varmatches=document.querySelectorAll(".scrollbar");varps=newPerfectScrollbar('.scrollbar');varps=newPerfectScrollbar('.scrollbar2');varps=newPerfectScrollbar('.scrollbar3');varps=newPerfectScrollbar('.scrollbar'){suppressScrollX:true};</script>.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/
まとめ
スクロールバーでも色々あるんだなぁと思いました。