webkit系のブラウザやIE/Edgeのスクロールバーを非表示にする方法

今回はChromeやSafariなどのwebkit系のブラウザと、IE/Edgeのスクロールバーを非表示にする方法を紹介します。

デザインによってはスクロールバーを非表示にしたいときもあると思うので、そんな場合の対象法です。

 

webkit系のブラウザ

ChromeやSafariなどが該当します。

以下のコードでスクロール領域でもスクロールバーを非表示にすることができます。

非表示にしたい場所のセレクタに、「::-webkit-scrollbar」をつけます。

.selector::-webkit-scrollbar{
 display:none;
}

 

IE/Edge

IE/Edgeの場合は以下のコードで非表示にします。

.selector {
 -ms-overflow-style:none;
}

 

とても簡単にできるので試してみてください。