前端隐藏滚动条,但保持滚动效果

最新推荐文章于 2024-08-06 13:49:07 发布

One_for_all96版

最新推荐文章于 2024-08-06 13:49:07 发布

阅读量4.3k

点赞数 1

文章标签： html css javascript 隐藏滚动条滚动

本文链接：https://blog.csdn.net/weixin_42134685/article/details/81091722

版权

一：以隐藏水平滚动条为例。

1.给父元素加一个样式(overflow:hidden)，隐藏滚动条，但是这样做之后，滚动效果也会消失。

2.障眼法，给父元素添加样式(overflow:hidden),而子元素添加(overflow-x:hidden;overflow-y:scroll;)，然后把子元素的高设置为父元素的高加上17px，17px是滚动条的高度，这样，父元素隐藏，子元素没有隐藏，实现的效果就是滚动条看不到了，但效果却还在。

3.而有时我们的高度没有固定值的时候，要动态设置高度时，则需要使用javascript;如下：

            //获取父div高度；
            var o = document.getElementById("f_bottom");
            var h = o.offsetHeight;
            //给子div高度赋值；
            document.getElementById("bottom").style.height= h+17 +"px";

4.当我们想通过按钮让滚动条滚动的时候，我们可以给按钮加上事件。以下面为例，可直接复制代码测试

html部分代码

<body>
		<div id="f_bottom">
		<input id="up" type="button" value="&lt"/>
		<input id="down" type="button" value="&gt"/>
		<div id="bottom">
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>
			<div class="son"><input type="button" value="按钮"/></div>			
		</div>

		</div>
	</body>

css部分代码

<style>
	#f_bottom{
		width: 100%;
		overflow: hidden;	
	}
	#bottom{
		width: 94%;
		float: left;
		overflow-y:hidden;
		overflow-x: auto;
		white-space: nowrap;
		margin:0 auto;
	}
	.son{
		width:10%;
		display: inline-block;
	}
	.son input{
		
		width:100%;
		height:20px;
		background:	#61B5CF;
		color:white;
		
	}
	#up{
		float:left;
		width:2%;
		height:20px;
		background-color:#61B5CF;
		color:white;
		border:1%;
		padding:0 0;
		margin-right:1%;
	}
	#down{
		float:right;
		width:2%;
		height:20px;
		background-color:#61B5CF;
		color:white;
		border:1%;
		padding:0 0;
		margin-left:1%;
	}
</style>

js部分代码

<script>
	window.onload=function(){
		//获取浏览器高度
		var clientH = document.documentElement.clientHeight;
		//获取父div
		var o = document.getElementById("f_bottom");
		//给父div高度赋值
		o.style.height=clientH/5+"px";
		//获取父div高度；
		var h = o.offsetHeight;
		//给子div高度赋值；
		document.getElementById("bottom").style.height= h+17 +"px";
		//获取向左按钮
		var obtnup = document.getElementById('up');
		//获取向右按钮
		var obtndown = document.getElementById('down');
		//获取右滚动条的元素
		var odiv = document.getElementById('bottom');
		//需要滚动条移动的距离
		var step = odiv.offsetWidth/20;
		//给按钮添加单机滚动条移动事件
		obtnup.onclick=function(){
			odiv.scrollLeft=odiv.scrollLeft-step;
		}
		obtndown.onclick=function(){
			odiv.scrollLeft=odiv.scrollLeft+step;
		}
	}
</script>

5：需要注意的是，当高度使用百分比时，比如(height:100%;)，这时候，父元素的高度应该是要有值的，当需要自适应屏幕高度时候，我们应该用js获取浏览器高度，然后再给元素高度赋百分比的值，要不然直接使用百分比是获取不到浏览器高度的。

    //获取浏览器高度
	var clientH = document.documentElement.clientHeight;
    //获取浏览器宽度
     var clientW = document.documentElement.clientWidth;

6.还有下面这个比较常用的方法，要想div随着浏览器高度变化而变化，就应该给html和body都加上(height:100%)，需要注意的是，只单独设置其中的一个，是不会自适应高度的。

	html,body{
		height:100%;
	}

最后推荐一个自学的网站，你一定会感谢我的，记得先注册哦

https://how2j.cn?p=71555

One_for_all96版

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫