MENU

CSS/jQueryでoverflow-y:auto/scrollなエリアのスクロールバーを非表示にする

スクロールバーを自作で表示させたいとき、デフォルトのスクロールバーが邪魔だったので非表示にする方法をまとめました。

CSSだけで


html 
{
  -ms-overflow-style: none;  /* IE10+ */
}
html::-webkit-scrollbar  /* Webkit(Chrome) */
{
  display: none;
}

CSSだけで対応できるのは、IE10+とChromeだけです。

他のブラウザへの対応

全体のスクロールバーを消す


<html>
<body>



  

    このエリアのスクロールバーを消す
  




</html>
</body>


.scrollbar_container 
{
  position: relative;
  height: 100vh;
  overflow-x: hidden;
}
.scrollbar_hidden 
{
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 34px);  /* デフォルト値 */
  height: 100%;
  overflow-y: auto;
}


$('
').css(
{
  'display': 'none',
  'width': '100px',
  'height': '1px',
  'overflow-y': 'scroll'
})
.appendTo('body');

var scroll_bar_width = 100 - parseInt($('.scroll_bar_width').css('width'));

$('.scroll_bar_width').remove();

// デフォルト値を上書き
$('.scrollbar_hidden').css('width', 'calc(100% + ' + scroll_bar_width * 2 + 'px)');

ほとんどのブラウザではスクロールバーの幅は17pxですが、一部例外もあるのでJSでスクロールバーの幅を調べて上書きさせています。

全体ではなく一部スクロールする場合




  

    このエリアのスクロールバーを消す
  





.scrollbar_container 
{
  width: 300px;
  overflow-x: hidden;
}
.scrollbar_hidden 
{
  width: calc(100% + 17px);  /* デフォルト値 */
  height: 200px;
  overflow-y: auto;
}


$('
').css(
{
  'display': 'none',
  'width': '100px',
  'height': '1px',
  'overflow-y': 'scroll'
})
.appendTo('body');

var scroll_bar_width = 100 - parseInt($('.scroll_bar_width').css('width'));

$('.scroll_bar_width').remove();

$('.scrollbar_hidden').css('width', 'calc(100% + ' + scroll_bar_width + 'px)');

calc() を使用するのでIE9+です。