首页 > 移动平台 > 详细

css 禁用浏览器滚动条,初始最外层包含容器 wrapper

时间:2020-05-22 23:13:34      阅读:85      评论:0      收藏:0      [点我收藏+]

浏览器默认的视窗会随着滚动条滚动,绝对定位的元素会随着滚动条滚动,为了解决这个问题我们需要禁止浏览器的滚动条,然后在代码的最外层初始化一个 div(最外层包含容容器代替默认的视窗),是滚动天出现在最外层容器上,从而解决决定定位的元素滚动的问题。CSS 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style type="text/css">

*{
margin: 0;
padding: 0px;
}
html,body{
height:100%;
overflow: hidden;
}

#wrapper{
height:100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div style="height: 200px; width:200px;background-color: pink;position:absolute; left: 20px;top:20px;"></div>
<div style="height: 2000px;"></div>
</div>
</body>
</html>

  技术分享图片

 

css 禁用浏览器滚动条,初始最外层包含容器 wrapper

原文:https://www.cnblogs.com/spqin/p/12939794.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!