html div隐藏滚动条不能使用,CSS隐藏滚动条但不影响正常滚动

由于某些原因你可能需要隐藏盒子的滚动条但又要它保持滚动效果。

百度找不到答案，谷歌或许你会找到。我就直接提供demo出来，运行代码来看效果吧。

有两种方法：大体思路是加一个外层div使用overflow:hidden对内层div进行遮蔽，而内层根据不同方法把滚动条挤到外层div的遮蔽范围外。

最后加两句js用于更好地支持各大浏览器当中的显示效果。

方法一

内层div使用overflow:auto;padding-right:17px

隐藏滚动条但不影响滚动-overflow+padding-right | INLOJV

/*

核心在于 外层 overflow:hidden 内层overflow:auto;padding-right:17px,

注意box-sizing 属性不要设置成 border-box

内层的width不合适的话可以单独调整

边框显示是为了方便识别 body、外层、内层边界

*/

*{margin:0;}

#container-outer{

height: 100%;

width: 100%;

border: 2px solid #66FF99;

overflow: hidden;

}

#container-inner{

width: 100%;

height: 99%;

border: 2px solid #0066FF;

overflow: auto;

padding-right: 17px;

}

html, body{

height: 99%;

border: 2px solid #CC0099;

overflow:hidden;

}

开始 - inlojv.com

滚动条已隐藏
试着滚动页面

滚动条已隐藏
试着滚动页面

滚动条已隐藏
试着滚动页面

滚动条已隐藏
试着滚动页面

滚动条已隐藏
试着滚动页面

滚动