移动端绝对定位模拟固定定位

最新推荐文章于 2023-07-26 22:39:57 发布

无名氏*

最新推荐文章于 2023-07-26 22:39:57 发布

阅读量340

点赞数

本文链接：https://blog.csdn.net/qq_44848423/article/details/112853610

版权

原理：当一个元素设置了position绝对定位，而且其祖先元素都没有设置定位，那这
个定位的参照点就是html。当body和html都设置了overflow属性后，body的overflow
会生效在自身上(就是滚动条)，html的verflow会生效在document上，而html设置
overflow:hide，就是禁止了自己的滚动条，body设置overflow:auto，那出现的滚动条
就是body上的，你拖动滚动条的时候就是拖动body，html并没有发生位置变化，那以
html为参照物设置绝对定位的元素自然也不会发生位置变化，所以就达到了绝对定位
模拟固定定位的效果。

<style>
html,
body {
    height: 100%;
    overflow: hidden;
}

html #wrapper,
body #wrapper {
    height: 100%;
    /* 控制#wrapper显示滚动条 */
    overflow: auto;
}

html #wrapper .head,
body #wrapper .head {
    /* 其父元素#wrapper相对于body定位，由于body禁止滚动条显示，所以.head也不会随着滚动条滚动 */
    position: absolute;
    width: 100%;
    height: 100px;
    background-color: pink;
}

</style>


<body>
<div id="wrapper">
    <div class="head"></div>
</div>

</body>


<script>
(() => {
     for (var i = 0; i < 100; i++) {
         wrapper.innerHTML += "xxx<br>";

     }
 })()
</script>

无名氏*

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端绝对定位模拟固定定位

<style>html,body { height: 100%; overflow: hidden;}html #wrapper,body #wrapper { height: 100%; /* 控制#wrapper显示滚动条 */ overflow: auto;}html #wrapper .head,body #wrapper .head { /* 其父元素#wrapper相对于body定位，由于body禁止滚动条显示，所以
复制链接

扫一扫