2

我在移动设备上有一个固定位置为 100% 宽度和高度的光窗，带有溢出-y 自动，因为光窗比大多数移动显示器大。以下是我拥有的两个 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 上的常规平滑滚动一样滚动。

谢谢

4

1 回答 1

2

您正在为 iphone 等触摸设备寻找动量类型的滚动，其中手指轻弹会发送网页滚动，并且它会一直持续到最终减速并停止。Chris Cover 在这里解释了一个解决方案

要将其应用于您的代码，您应该添加-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;
}

希望这可以帮助。

于 2016-10-17T02:33:13.747 回答