Safari / Chrome / Firefox for iOS 中的正文和固定的 div 滚动问题答案

【问题标题】：Body and fixed div scrolling issues in Safari / Chrome / Firefox for iOSSafari / Chrome / Firefox for iOS 中的正文和固定的 div 滚动问题
【发布时间】：2019-12-16 00:11:16
【问题描述】：

这是一个测试网页：

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

包括如下代码：

body.no-scroll {
  overflow: hidden;
}

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

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

当您滚动（使用触摸拖动或鼠标滚轮）弹出窗口或叠加层时，它意味着要么忽略它（当您滚动灰色叠加层时），要么滚动弹出内容 - 如果某些内容被隐藏。如果没有任何弹出窗口被隐藏，那么它也会忽略拖动。

它是这样工作的： #text-viewer 弹出窗口使用overflow-y auto。当弹出窗口处于活动状态时，它将“无滚动”类添加到正文元素。此类具有溢出的“隐藏”css。无论您是拖动弹出窗口还是灰色的叠加层，这都应该阻止正文滚动。

在 iOS 上，透明覆盖可以滚动，当您滚动“短引号”弹出窗口时，它也会滚动正文。拖动短引号弹出窗口时，不应滚动任何内容。

【问题讨论】：

你应该为 .body.no-scroll 类添加 overflow:auto !important
嗨，我试过了——现在它可以让你在所有浏览器中滚动灰色覆盖层——但它并没有解决 iOS 中的问题。见：sky-walker.net/temp/scroll2.html
我检查了最新版本，它工作正常......你测试了一个
尝试在灰色覆盖层上使用鼠标滚轮 - 对我来说它允许身体滚动
请使用触摸兄弟.. 应该如何在手机中使用鼠标滚轮？想想 UI..

标签： ios css scroll

【解决方案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向正文添加填充

【讨论】：

您好，我为您的第一个建议创建了一个 codepen 的分支：(-webkit-overflow-scrolling: touch)codepen.io/zephyr103/pen/LwgbJg 对于第二个建议，我想要老式的 javascript/jQuery 代码（不是(e) => {)。我没有滚动条的问题 - 我只是在谈论事物是否滚动。原始的 codepen 在 MacOSX 的 Safari 和 Chrome DevTools 的 iOS 模拟器中运行良好。

【解决方案2】：

我找到了适用于 iOS Safari、Chrome 和 Firefox 的解决方案

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

我删除了 body 元素的无滚动类和样式。

当弹出窗口显示时：

var targetElement = document.querySelector("#text-viewer");
bodyScrollLock.disableBodyScroll(targetElement);

当弹出窗口被隐藏时：

bodyScrollLock.clearAllBodyScrollLocks();

js文件：

https://github.com/willmcpo/body-scroll-lock/tree/master/lib

用法：

https://www.npmjs.com/package/body-scroll-lock

唯一的问题是长引号弹出窗口不会缩小以适应 iOS Safari 和 Chrome 的屏幕（有时在 iOS Firefox 中可以）

【讨论】：

【解决方案3】：

关闭对话框后，对 iphone 执行此操作

$('html').removeAttr('style');
$('body').removeAttr('style');

【讨论】：