小编Jon*_*han的帖子

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>\n

Run Code Online (Sandbox Code Playgroud)\n\n

CSS 选项 1：宽体、不需要的垂直阻力

\n\n

html, 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

Run Code Online (Sandbox Code Playgroud)\n\n

在这里，我将 body 和 html 元素设置为与内容一样宽。滚动自然进行。但如果用户向上或向下拖动内容，整个滚动区域就会移动。垂直运动可以与任何水平滚动同时触发，这感觉非常分散注意力。下面链接的图像显示了当有人从左上角拉出时页面的显示方式。

\n\n

具有不需要的垂直阻力的水平滚动