为什么滚动条在 iOS Safari 中的粘性元素后面？答案

【问题标题】：Why scrollbar is behind sticky elements in iOS Safari?为什么滚动条在 iOS Safari 中的粘性元素后面？
【发布时间】：2022-05-03 13:03:05
【问题描述】：

当在带有overflow-y: auto; 的容器中使用position: sticky; 时，容器的滚动条会呈现在粘性元素的后面。
在以下屏幕截图中，垂直滚动条位于元素 1、2、3 和 4 的后面。

但是当我从容器中删除 height: 100vh; overflow-y: auto; 并在 body 元素内滚动时效果很好。

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        .container {
            height: 100vh; 
            overflow-y: auto;
            background-color: lightblue;
        }
        .stickyHeader {
            position: sticky;
            top: 0;
            background-color: #eee;
            height: 40px;
        }
        .item {
            height: 200px;
        }
    </style>
</head>

<body style="margin: 0">
    <div class="container">
        <div class='stickyHeader'>1</div>
        <div class="item"></div>
        <div class='stickyHeader'>2</div>
        <div class="item"></div>
        <div class='stickyHeader'>3</div>
        <div class="item"></div>
        <div class='stickyHeader'>4</div>
        <div class="item"></div>
        <div class='stickyHeader'>5</div>
        <div class="item"></div>
    </div>
</body>

</html>

【问题讨论】：

不清楚您的问题/问题是什么。

标签： html css ios css-position sticky

【解决方案1】：

设置-webkit-transform: translateZ(0) 解决了这个问题。

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        .container {
            height: 100vh; 
            overflow-y: auto;
            background-color: lightblue;

            /* fix */
            -webkit-transform: translateZ(0);
        }
        .stickyHeader {
            position: sticky;
            top: 0;
            background-color: #eee;
            height: 40px;
        }
        .item {
            height: 200px;
        }
    </style>
</head>

<body style="margin: 0">
    <div class="container">
        <div class='stickyHeader'>1</div>
        <div class="item"></div>
        <div class='stickyHeader'>2</div>
        <div class="item"></div>
        <div class='stickyHeader'>3</div>
        <div class="item"></div>
        <div class='stickyHeader'>4</div>
        <div class="item"></div>
        <div class='stickyHeader'>5</div>
        <div class="item"></div>
    </div>
</body>

</html>

【讨论】：