スクロールバーを表示せずにページ全体をスクロールできるようにしたいです。
Google Chrome では次のようになります:
::-webkit-scrollbar {
display: none;
}
しかし、Mozilla Firefox と Internet Explorer ではそのように動作しないようです。
CSS でもこれを試してみました:
overflow: hidden;
確かにスクロールバーは非表示になりますが、それ以上スクロールできなくなります。
ページ全体をスクロールしながらスクロールバーを削除する方法はありますか?
CSS または HTML のみでお願いします。
ベストアンサー1
正常に動作している単なるテストです。
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
JavaScript:
スクロールバーの幅はブラウザによって異なるため、JavaScript で処理する方がよいでしょう。そうすればElement.offsetWidth - Element.clientWidth
、正確なスクロールバーの幅が表示されます。
または
を使用するとPosition: absolute
、
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
情報:
この回答に基づいて、私はシンプルなスクロールプラグイン。