Ole*_*ndr 5 html css android google-chrome scroll-snap
我正在尝试使用CSSscroll-snap实现全尺寸浏览器视口滚动。但是Android上的Chrome存在一个问题(在91版本中测试):当地址栏移动时(第一次滚动或滚动方向改变时)滚动元素可以摇动或/和滚动部分\xe2\x80\x94\xc2\ xa0没有到达正确的元素点。请查看代码片段。
\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也许有一些方法可以使用 CSS 滚动捕捉来使这项工作顺利而准确地进行?同时,我想在 Android 上的 Chrome 上保留地址栏的移入/移出,正如该浏览器的预期那样。
\n| 归档时间: |
|
| 查看次数: |
698 次 |
| 最近记录: |