(隐藏滚动条)滚动条隐藏但是内容可以滚动游览器兼容

最新推荐文章于 2024-08-20 11:07:04 发布

pupuGirl

最新推荐文章于 2024-08-20 11:07:04 发布

阅读量6.8k

点赞数

分类专栏：前端开发笔记文章标签： css 游览器兼容谷歌

本文链接：https://blog.csdn.net/sinat_31529197/article/details/78794382

版权

前端开发笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天项目中要实现一个功能，后台系统的左侧要固定，并且超出屏幕高度可以滚动，为了美观，要求隐藏左侧滚动条，对于谷歌直接用css来控制就好了--->.left-bar::-webkit-scrollbar {display: none;}来说很好做到，但是要兼容其他游览器，就不行了

为了兼容其他游览器，，投机取巧了我，大概意思就是用两个div包装，最外层div设置overflow:hidden,里面那层设置overflow-y: scroll;并且最里面的宽度是最外面宽度+15像素，这15像素就是右侧滚动调的宽度,具体代码如下（），

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.left-bar::-webkit-scrollbar {
				display: none;
			}
			 .bar-content{width: 200px;height:100%;position: fixed;top:0;left: 0;bottom: 0;z-index: 999;}
  			 .no-bar{width:200px;height:100%;background:pink;overflow-x:hidden;position:relative;top:0;left:0;bottom:0;z-index:999;}
             .left-bar{width:215px;height: 100%;position: absolute;top: 0;left: 0;bottom: 0;z-index: 999;overflow-y: scroll;overflow-x:hidden;background: #464c5b;color: #fff}
		</style>
	</head>

	<body>
		<div class="bar-content">
			<div class="no-bar">
				<div class="left-bar">
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
					<p>哈哈哈撒上啊</p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//alert(window.innerHeight)
		</script>
	</body>

</html>