浏览器兼容 - 旧版overflow:auto特殊情况下不会触发浏览器重排

最新推荐文章于 2023-09-06 14:15:40 发布

JA+

最新推荐文章于 2023-09-06 14:15:40 发布

阅读量333

点赞数

分类专栏： web前端文章标签： css html html5

本文链接：https://blog.csdn.net/qq_35459724/article/details/119938396

版权

web前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

条件

父元素position: relative; 不设置height，或者设置height为auto;

子元素position: absolute;元素位置的变动，导致的overflow 滚动条出现变动。

demo代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <title>Document</title>
    <style>
        .content{
            width: 300px;
            height: auto;
            overflow:auto;
            position:relative;
            border:1px solid #aaa;
        }
        .inner{
            width: 100px;
            height: 50px;
            background-color: #aaa;
            position:absolute;
            top: 0;
            left: 0px;
            animation: move 5s linear infinite alternate;
        }
        @keyframes move {
            to{
                left: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="content">
        111111
        <div class="inner"></div>
    </div>
    <div style="height:30px;width: 300px;background-color: blanchedalmond;">1231</div>
</body>
</html>