Android 上 Chrome 中的 CSS 滚动对齐错误

Ole*_*ndr 5 html css android google-chrome scroll-snap

我正在尝试使用CSSscroll-snap实现全尺寸浏览器视口滚动。但是Android上的Chrome存在一个问题(在91版本中测试):当地址栏移动时(第一次滚动或滚动方向改变时)滚动元素可以摇动或/和滚动部分\xe2\x80\x94\xc2\ xa0没有到达正确的元素点。请查看代码片段。

\n

\r\n
\r\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta http-equiv="X-UA-Compatible" content="IE=edge">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Document</title>\n</head>\n<body>\n  <div class="wrapper">\n    <div class="wrapper__el" style="background: green">1</div>\n    <div class="wrapper__el">2</div>\n    <div class="wrapper__el" style="background: green">3</div>\n    <div class="wrapper__el">4</div>\n    <div class="wrapper__el" style="background: green">5</div>\n    <div class="wrapper__el">6</div>\n    <div class="wrapper__el" style="background: green">7</div>\n    <div class="wrapper__el">8</div>\n    <div class="wrapper__el" style="background: green">9</div>\n  </div>\n  \n  <style>\n    html, body {\n      height: 100%;\n      margin: 0;\n    }\n    .wrapper {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      scroll-snap-type: mandatory;\n      scroll-snap-type: y mandatory;\n      overflow: scroll;\n    }\n    .wrapper__el {\n      scroll-snap-align: start;\n      scroll-snap-stop: always;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  </style>\n  \n</body>\n</html>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

也许有一些方法可以使用 CSS 滚动捕捉来使这项工作顺利而准确地进行?同时,我想在 Android 上的 Chrome 上保留地址栏的移入/移出,正如该浏览器的预期那样。

\n