小编Ole*_*ndr的帖子

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

我正在尝试使用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 …
Run Code Online (Sandbox Code Playgroud)

html css android google-chrome scroll-snap

5
推荐指数
0
解决办法
698
查看次数

标签 统计

android ×1

css ×1

google-chrome ×1

html ×1

scroll-snap ×1