iOS 上的水平滚动没有垂直弹跳或超快惯性
Jon*_*han 6 html css mobile-safari horizontal-scrolling ios
我\xe2\x80\x99m 在一个水平滚动网站上工作，遇到两个相互依赖的 iOS 滚动问题。第一个问题是我的水平滚动区域以\xe2\x80\x99s 的方式垂直（或橡皮筋）弹跳，非常烦人。第二个是 css 惯性滚动属性-webkit-overflow-scrolling: touch滚动速度是 iOS 上正常惯性滚动的两倍，而这种额外的速度会导致渲染问题。我可以独立解决任一问题，但每种解决方法都会产生另一个问题。
\n\n有什么方法可以在水平方向上实现惯性滚动，同时防止垂直拖动吗？
\n\n首先，这里\xe2\x80\x99是我的标记的简化形式：
\n\n<!DOCTYPE html>\n<html>\n <head>\n <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">\n <link rel="stylesheet" type="text/css" href="style.css" >\n </head>\n <body>\n <div id="wide-content"></div>\n </body>\n</html>\nCSS 选项 1：宽体、不需要的垂直阻力
\n\nhtml, body {\n width: 10000px;\n height: 100%;\n top: 0px;\n left: 0px;\n bottom: 0px;\n right: 0px;\n position: absolute;\n}\n\n#wide-content {\n width: 100%;\n height: 100%;\n}\n在这里，我将 body 和 html 元素设置为与内容一样宽。滚动自然进行。但如果用户向上或向下拖动内容，整个滚动区域就会移动。垂直运动可以与任何水平滚动同时触发，这感觉非常分散注意力。下面链接的图像显示了当有人从左上角拉出时页面的显示方式。
\n\n
CSS选项2：带有溢出的窄体：滚动，内部滚动太快
\n\nhtml, body {\n width: 100%;\n height: 100%;\n top: 0px;\n left: 0px;\n bottom: 0px;\n right: 0px;\n position: absolute;\n overflow-y: hidden;\n overflow-x: scroll;\n -webkit-overflow-scrolling: touch;\n}\n\n#wide-content {\n width: 100000px;\n height: 100%;\n display: block;\n}\n此样式选项使用窄体容器，\xe2\x80\x99s 粘合到视口边缘。正文设置为“溢出：滚动”，并且滚动内容现在具有较大的宽度值。我还添加了特殊的 webkit 属性来赋予滚动惯性。仍然有一些垂直弹跳，但内容一次只能向一个方向移动，因此滚动体验要好得多。问题在于 -webkit-overflow-scrolling: touch 产生的惯性滚动速度大约是 iOS 默认滚动选项的两倍。
\n\n为什么不接受更快的滚动呢？滚动内容包含大图像。如果用户滚动得太快，由于 iOS 渲染故障，图像边缘会分散注意力。额外的惯性大大增加了用户看到渲染错误的机会。如果有任何方法可以防止边缘在水平滚动到视图中时闪烁，我将很乐意使用此 CSS 选项。
\n| 归档时间： |
|
| 查看次数： |
1190 次 |
| 最近记录： |