CSS 主元素内的嵌套粘滞部分带有 overflow-x: hidden

Question

我有一个非常简单的问题：我想在一个 <main> 标签中包含多个 <section>。每个部分都应包含一个粘性子 <div>，因此它受该部分高度的约束。现在我遇到了 <main> 需要 overflow-x: hidden 来删除不需要的水平滚动条（尤其是在 Safari 上）的问题，但同时这一行似乎禁用了粘性元素。有没有 JS 解决这个问题的想法？

这个演示展示了这个问题。取消注释 overflow 以查看差异。

<!DOCTYPE html>
<html>
    <head>
        <style>
            main {
                width: 100%;
                height: auto;
                min-height: 100vh;
                /*overflow-x: hidden;*/
                position: relative;
                display: block;
            }
            section {
                width: 100%;
                min-height: 100vh;
                background: green;
            }
            div {
                position: sticky;
                top: 0;
            }
        </style>
    </head>
    <body>
        <main>
            <section>
                <div>
                    <p>Content goes here</p>
                </div>
            </section>
            <section>
                <div>
                    <p>Second content goes here</p>
                </div>
            </section>
        </main>
    </body>
</html>

Answer 1

如果父元素隐藏了溢出，位置粘性通常不起作用属性。而不是 main 尝试将 "overflow-x: hidden" 给 body

body
          {
              overflow-x: hidden;
          }

Answer 2

您可以试试下面的代码，

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                overflow-x: hidden;
            }
            main {
                width: 100%;
                height: auto;
                min-height: 100vh;
                /*overflow-x: hidden;*/
                position: relative;
                display: block;
            }
            section {
                width: 100%;
                min-height: 100vh;
                background: green;
            }
            div {
                position: sticky;
                top: 0;
            }
        </style>
    </head>
    <body>
        <main>
            <section>
                <div>
                    <p>Content goes here</p>
                </div>
            </section>
            <section>
                <div>
                    <p>Second content goes here</p>
                </div>
            </section>
        </main>
    </body>
</html>

注意：您也可以仅针对此特定任务使用 overflow: auto; 而不是 overflow-x: hidden;。

供您参考，请访问下面link：https://www.w3schools.com/css/css_overflow.asp

CSS 主元素内的嵌套粘滞部分带有 overflow-x: hidden

CSS nested sticky section inside main element with overflow-x: hidden

css

sticky