滚动iOS对于溢出元素是跳跃的​​（光窗口）

Question

我在移动设备上有一个100％宽度和高度固定位置的光窗，带有溢出自动窗口，比大多数移动显示器大。以下是我有两个css课程

.noscroll { // add to body when the lightwindow shows to prevent body scrolling
    overflow: hidden !important;
}
.lightwindow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

它工作正常除了在iPhone上滚动非常不稳定和跳跃，我希望它像在iPhone上常规平滑滚动一样滚动。

谢谢

Answer 1

你正在寻找像iphone这样的触摸设备的动量类型滚动，其中手指的轻弹发送网页滚动并且它一直持续到最终减速和停止。 Chris Cover有一个解释here

的解决方案

要将其应用于您的代码，您应该添加-webkit-overflow-scrolling: touch;您的lightwindow课程以及overflow-y: scroll;，以便它会变成以下内容

.lightwindow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

希望这会有所帮助。