0

最近我注意到我正在开发的应用程序在 Chrome Android 上滚动时显示出非常不一致的行为。期望的行为是立即向上滚动隐藏地址栏并向下滚动推回视口。就我而言，它需要一些滚动才能使地址栏向上滑动。之后，一切都按预期工作。（请参阅包含的演示 gif）有人向我指出要尝试更长的内容，但无论内容多长，都需要任意滚动量才能触发向上滑动。

我真的很想了解这里发生了什么。我已经看到网站在第一次滚动出现后立即向上滑动，而其他网站的行为与我之前描述的相同。很高兴知道是什么触发了幻灯片，以便相应地计划内容。

不幸滚动的演示 gif

这里出现了过度简化的代码

在这个演示中，我尝试用 vh 交换 %，删除显式大小，设置overflow-y:scroll但没有任何帮助

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" integrity="sha256-WAgYcAck1C1/zEl5sBl5cfyhxtLgKGdpI3oKyJffVRI=" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>Scroll Like A Swan</title>
</head>

    <body>
        <div id="wrapper">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, rerum fuga corporis reprehenderit voluptate aperiam temporibus. Sequi vel nemo et molestias nihil, culpa quas recusandae fugiat, porro magnam accusamus? Sint maxime excepturi ipsam delectus ea rem perferendis mollitia adipisci! Impedit!
        </div>

</body>

</html>

body{
    background-color: yellow;
    overflow-y: auto;
    height: 100%;
}

#wrapper{
    display: block;
    background-color: orangered;
    position: relative;
}
4

1 回答 1

0

不幸的是，据我所知，你真的无能为力。

这是谷歌浏览器需要解决的问题。作为 Web 开发人员，您无能为力，因为问题出在 Google Chrome 而不是您的网站上。

于 2020-03-30T22:48:00.217 回答