窗口抖动问题思考与解决

最新推荐文章于 2024-06-16 17:49:56 发布

bellus-

最新推荐文章于 2024-06-16 17:49:56 发布

阅读量2.4k

点赞数 1

分类专栏： node.js 文章标签：标签窗口抖动 offsetTop

知识共享。

本文链接：https://blog.csdn.net/xiaoyu19910321/article/details/76449233

版权

node.js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

首先窗口抖动分两种一种是鼠标有问题，以滚动窗口抖动。这里不做讨论。

我们这里说的是因为经常有 header 在最顶层，做菜单栏也在最顶层。只有主窗口内容一旦大于当前页面，会自动生成滚动条。上下华东查看内容。

原因分析：

使用蚂蚁金服的标签，当header设置offsetTop={0} 最顶层时，main窗口内容总长度一旦大于当前窗口，滚动条一上滑小于header高度是。就可以完全显示所有内容，滚动条就会消失，一旦消失，内容又大于高度，增加滚动条。重复就会形成抖动现象。

解决方式：不再使用原来的方式，main主显示区添加 padding等于header 高度，滚动条一直存在即可解决此问题。

demo 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "
">
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .layoutRoot{
            width: 600px;
            margin: 0 auto;
        }
        .fix{
            width:100%;
            height: 65px;
            background-color: #cccccc;
        }
        .fixed{
            position: fixed;
            left: 0;
            top: 0;
        }
        .content{
            background-color: #c3f0ff;
            height: 840px;
        }
    </style>
</head>
<body>
<div class="layoutRoot">
    <div class="fix fixed">我是一个悬浮窗</div>
    <div class="fix "></div>
    <div class="content">这里是内容</div>
</div>
</body>
</html>