CSS隐藏滚动条但不影响正常滚动

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

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

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

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

方法一

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>隐藏滚动条但不影响滚动-overflow+padding-right | INLOJV</title>
    <style type="text/css">
	/*
		核心在于 外层 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;
		}
    </style>
</head>
<body>
<div id="container-outer">
	<div id="container-inner">
		开始 - inlojv.com<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		到底了<br/>
	</div>
<div>
<script>
	/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
	var parent = document.getElementById('container-outer');
	var child = document.getElementById('container-inner');
	child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
</script>
</body>
</html>

方法二

内层div使用position:absolute;right:-17px

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>隐藏滚动条但不影响滚动-position+right | INLOJV</title>
    <style type="text/css">
	/*
		核心在于 外层 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;
		}
    </style>
</head>
<body>
<div id="container-outer">
	<div id="container-inner">
		开始 - inlojv.com<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		滚动条已隐藏<br/>试着滚动页面<br/><br/>
		到底了<br/>
	</div>
<div>
<script>
	/*为了更好兼容各大浏览器，可以使用下面的js代码 - inlojv.com */
	var parent = document.getElementById('container-outer');
	var child = document.getElementById('container-inner');
	child.style.right = child.clientWidth - child.offsetWidth + "px";
</script>
</body>
</html>

TAGS: css 滚动条隐藏

本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。

转载请注明出处链接 : https://www.inlojv.com/5430.html

CSS隐藏滚动条但不影响正常滚动

相关文章