ios - Safari/Chrome/Firefox for iOS的正文和固定div滚动问题

Question

这是一个测试网页:

https://codepen.io/zephyr103/pen/KOxgzL

包括如下代码:

body.no-scroll {
  overflow: hidden;
}

它可以在我的MacOSX浏览器(包括Chrome中的iOS / Android模拟器)中运行，并且通常在Android中可以正常运行。它在iOS的Safari，Chrome和Firefox中存在问题。

当您单击“短引号”或“长引号”时，它具有可变高度的固定位置弹出窗口，带有透明的灰色覆盖层，您可以单击以退出弹出窗口。

当您滚动(使用触摸拖动或鼠标滚轮)弹出框或覆盖图时，它意味着可以忽略它(滚动灰色覆盖图时)或滚动弹出内容(如果某些内容被隐藏)。如果没有隐藏任何弹出窗口，则它也将忽略拖动。

它是这样工作的:
＃text-viewer弹出窗口使用溢出-y自动。当弹出窗口处于 Activity 状态时，它将“no-scroll”类添加到body元素。该类的CSS具有“隐藏”的溢出功能。无论您要拖动弹出窗口还是变灰的叠加层，这都应阻止主体滚动。

在iOS上，透明的覆盖层可以滚动，当您滚动“Short Quote”弹出窗口时，它也可以滚动正文。拖动短引号弹出窗口时，不应滚动。

Answer 1

我想您应该为Safari做的是添加

body.no-scroll {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

另外，当您打开弹出窗口时，将这段代码也添加到JavaScript中

body.ontouchstart = (e) => {
  e.preventDefault();
 };

如果要删除滚动条，则需要计算其宽度

const documentWidth = document.documentElement.clientWidth;
const windowWidth = window.innerWidth;
const scrollBarWidth = windowWidth - documentWidth;

然后使用 ${scrollBarWidth}px向主体添加填充