position:fixed;实现底层页面不跟随浮层模块滚动

最新推荐文章于 2023-12-04 18:57:51 发布

惜__缘

最新推荐文章于 2023-12-04 18:57:51 发布

阅读量1.5w

点赞数 1

分类专栏：实例练习文章标签： positionfixed 底层页面不跟随浮层模块滚动

本文链接：https://blog.csdn.net/liudan123012/article/details/51162187

版权

实例练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于工作需要，在首页做一个搜索浮层，要求浮层全屏显示（即：width:100%;height:100%;）。当页面内容超出屏幕高度时，页面添加滚动条（overflow:scroll;）。

搜索页面（浮层）代码：

可是问题是，当我们滑动到浮层底部或顶部时，底层页面（首页）也会跟着滑动，那么就会出现底层页面的滚动条。

同样，当浮层滑动到顶部，如果继续滑动页面的话，底层（首页）也会跟随滚动……如果在手机端测试，你会发现有两个滚动条的出现！

代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1.0,user-scalable=0" />
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <meta name="format-detection" content="telephone=no">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			html{font-size: 40px;}
			body{color: #333;font-family: "microsoft yahei";}
			
			article{padding: 0 .8rem;margin-top: .5rem;overflow: hidden;}
			li{list-style: none;float: left;width: 25%;text-align: center;line-height: 1.6;}			
			h2{font-weight: normal;font-size: 42px;text-align: center;}

			.open-box{font-size: 30px;margin:20px 0;overflow: hidden;}
			.open-box span{width:260px;height:80px;background: #1BBC9B;color: #fff;text-align: center;line-height: 80px;display: block;margin: 0 auto 30px;}
			
			.open-box .box{width: 100%;height: 100%;background: #fff;position: fixed;left: 0;top: 0;line-height: 40px;display: none;overflow: scroll;}
			
			.open-box p{padding: 20px 30px;display: table;height: 1px;}
			.open-box .closed{margin-bottom:30px;}
		</style>
	</head>
	<body>
		<h1>首页--底层页面</h1>
		<article>
			<div class="open-box">
				<span>点击打开搜索页面</span>
				<div class="box">
					<h2>搜索页面--浮层</h2>
					<div style="height: 15rem;">内容模块div</div>
					<p>在面向对象的编程语言中，类是对对象的抽象，在类中可以定义对象的属性和方法的描述；对象是类的实例，类只有被实例化后才能被使用。定义类　　在PHP中，使用关键字class加类名的方式定义类，然后用大括号包过类体，在类体中定义类的属性和方法。在面向对象的编程语言中，类是对对象的抽象，在类中可以定义对象的属性和方法的描述；对象是类的实例，类只有被实例化后才能被使用。定义类　　在PHP中，使用关键字class加类名的方式定义类，然后用大括号包过类体，在类体中定义类的属性和方法。</p>
					<div style="height: 10rem;">内容模块div</div>
					<span class="closed">关闭搜索页面</span>
				</div>
			</div>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
		</article>
		<script src="js/zepto.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$(".open-box span").click(function(){
					$(this).next(".box").show(300);
				});
				$(".closed").click(function(){
					$(this).parent().hide(300);
				});
			})
		</script>
	</body>
</html>
</span>

我试过设置<body>的height为100%，overflow:hidden;很遗憾的是不支持……

最后，我无意中发现通过设置<body>的固定定位（position:fixed）居然可以实现！