本文介绍了如何在HTML中隐藏滚动条但仍然保持页面的滚动功能。通过两种方法，一种是利用overflow和padding-right，另一种是通过position:absolute和right属性，实现了滚动条的视觉隐藏。同时提供了兼容不同浏览器的JavaScript代码。
由于某些原因你可能需要隐藏盒子的滚动条但又要它保持滚动效果。
百度找不到答案，谷歌或许你会找到。我就直接提供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
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
到底了
/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
var parent = document.getElementById('container-outer');
var child = document.getElementById('container-inner');
child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
方法二
内层div使用position:absolute;right:-17px
隐藏滚动条但不影响滚动-position+right | INLOJV/*
核心在于 外层 overflow:hidden;position:relative; 内层 position: absolute;right: -17px;,
内层的width不合适的话可以单独调整
边框显示是为了方便识别 body、外层、内层边界
*/
* {
margin:0;
}
#container-outer {
height: 100%;
width: 100%;
border: 2px solid #66FF99;
overflow: hidden;
position: relative;
}
#container-inner {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: -17px;
border: 2px solid #0066FF;
overflow: auto;
}
html, body {
height: 99%;
border: 2px solid #CC0099;
overflow:hidden;
}
开始 - inlojv.com
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
滚动条已隐藏
试着滚动页面
到底了
/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
var parent = document.getElementById('container-outer');
var child = document.getElementById('container-inner');
child.style.right = child.clientWidth - child.offsetWidth + "px";
扫一扫
2249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
