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

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

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%;
	}

 

展开阅读全文

没有更多推荐了,返回首页