Html 在iOS上水平滚动，没有垂直反弹或超快惯性_Html_Ios_Css_Mobile Safari_Horizontal Scrolling

Html 在iOS上水平滚动，没有垂直反弹或超快惯性

html ios css

Html 在iOS上水平滚动，没有垂直反弹或超快惯性,html,ios,css,mobile-safari,horizontal-scrolling,Html,Ios,Css,Mobile Safari,Horizontal Scrolling,我在一个水平滚动的网站上工作，遇到了两个相互依赖的iOS滚动问题。第一个问题是，我的水平滚动区域垂直反弹（或橡皮筋）的方式非常恼人。第二个是css惯性滚动属性-webkit溢出滚动：touch的滚动速度是iOS上正常惯性滚动速度的两倍，这一额外速度会导致渲染问题。我可以独立解决任何一个问题，但每个解决方案都会产生另一个问题有没有办法在水平方向上获得惯性滚动，同时防止垂直拖动首先，这里是我的标记的简化形式： <!DOCTYPE html> <html> <

我在一个水平滚动的网站上工作，遇到了两个相互依赖的iOS滚动问题。第一个问题是，我的水平滚动区域垂直反弹（或橡皮筋）的方式非常恼人。第二个是css惯性滚动属性-webkit溢出滚动：touch的滚动速度是iOS上正常惯性滚动速度的两倍，这一额外速度会导致渲染问题。我可以独立解决任何一个问题，但每个解决方案都会产生另一个问题

有没有办法在水平方向上获得惯性滚动，同时防止垂直拖动

首先，这里是我的标记的简化形式：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <link rel="stylesheet" type="text/css" href="style.css" >
    </head>
    <body>
        <div id="wide-content"></div>
    </body>
</html>

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

CSS选项2：带溢出的窄体：滚动，中间滚动太快

html, body {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: absolute;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

#wide-content {
    width: 100000px;
    height: 100%;
    display: block;
}

此样式选项使用粘贴到视口边缘的窄主体容器。正文设置为溢出：滚动，滚动内容现在具有较大的宽度值。我还添加了特殊的webkit属性来提供滚动惯性。仍然有一些垂直反弹，但内容一次只能朝一个方向移动，因此滚动体验要好得多。问题在于-webkit溢出滚动：touch产生惯性滚动，速度大约是iOS默认滚动选项的两倍

为什么不接受更快的滚动？滚动内容包含大图像。如果用户滚动过快，图像边缘会因iOS渲染故障而分心地闪烁。额外的惯性大大增加了用户看到渲染错误的机会。如果有任何方法可以防止边缘在水平滚动进入视图时闪烁，我很乐意使用这个CSS选项

html, body {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    position: absolute;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

#wide-content {
    width: 100000px;
    height: 100%;
    display: block;
}