Webkit - 如果不先向下滚动就无法向上滚动答案

【问题标题】：Webkit - Cannot Scroll Up Without First Scrolling DownWebkit - 如果不先向下滚动就无法向上滚动
【发布时间】：2021-05-16 13:43:48
【问题描述】：

我在 Webkit 浏览器上遇到了这个奇怪的 bug向上滚动。有关此问题的更多详细信息和视频可以找到：https://github.com/manufont/react-swipeable-bottom-sheet/issues/21?_pjax=%23js-repo-pjax-container

我不确定这个问题的确切原因是什么，但我正在尝试实施一个解决方案，我拦截滚动事件，如果用户试图向上滚动 - 我首先向下滚动一个像素并然后允许用户向上滚动。我将onScroll 处理程序添加到我的组件并具有以下代码：

const handleScroll = e => {
    const element = e.target;
    element.scrollTo(0, element.scrollTop + 1);
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
        // do something at end of scroll
        console.log('END OF SCROLL');
        element.scrollTo(0, element.scrollTop - 1);
    }
};

在这段代码中，我总是向下滚动一个像素，但问题是我无法检测到滚动的方向 - 我查看了执行此操作的各种解决方案，包括这个：https://stackoverflow.com/a/62497293/4909000 和 https://stackoverflow.com/a/50412319/4909000但它们都不适合我 - currentTarget.scrollY 未定义，钩子解决方案随机打印 scrolling down 并且似乎根本不起作用。

【问题讨论】：

视频链接坏了。您能否在codesandbox 上提供一个新鲜的视频和最低可重现性？
@onkarruikar 你应该可以在这里重现类似的问题：mysterious-shore-47382.herokuapp.com/restaurants/18/menu。只需在订单中添加一些商品，然后单击“下订单”即可打开可滑动的底部表单。如果您尝试一整天向下滚动，然后在 iPhone 上向上滚动，您会发现这是不可能的 - 但 MacOS（Safari 或 Chrome）不会出现此问题。

标签： javascript css ios scroll webkit

【解决方案1】：

看起来#bottom-float-menu 覆盖在主要内容上遇到了滚动问题。

当用户点击“下订单”时，尝试通过使用overflow: hidden 设置<body> 标记来阻止主要内容。

有关样式化模式（如您的菜单）的更多见解，请查看this article from CSS Tricks，包括 cmets 的第一个线程。

【讨论】：

您指的是教程的特定部分吗？如果您能给我提供更具体的解决方案/代码示例，我可以在网站上进行测试，或者更具体的问题描述，我们很高兴为您提供赏金。
我再次查看您的代码并意识到解决方案可能更简单。我刚刚更新了我的答案。
我刚刚向网站提交了该更改，但我仍然看到问题 - 除非我遗漏了什么。顺便说一句，这只发生在 iPhone / iPad 浏览器上，这在 MacOS 上不是问题。
您不需要设置<body> 的位置属性（就像您在覆盖 div 中所做的那样）。只是溢出应该解决（如果我的全部猜测是正确的）。
如果我删除“位置：已修复”，它会解决这个问题，但是它会引入另一个问题，即模式在滚动时上下跳跃，并且背景黑色透明覆盖也无法正常工作 - 你可以通过取消勾选“位置：固定”并尝试滚动来验证。