ios - iOS 上的滚动会因溢出元素而跳动 (lightwindow)

Question

我在移动设备上有一个固定位置为 100% 宽度和高度的光窗，带有 overflow-y auto，因为光窗比大多数移动显示器大。以下是我拥有的两个 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;
}

希望这对您有所帮助。