悬停固定元素时无法滚动可滚动div

Question

我们都知道移动浏览器上的 100vh 跳跃 (CSS3 100vh not constant in mobile browser)

为了防止这种情况发生，我将页面可滚动内容包装在一个单独的 div 中，效果很好！

但我仍然需要一些固定的元素。 当您现在将鼠标悬停在固定元素上并尝试滚动时，scroller-div 不会滚动，就像 body 在“正常滚动”时一样。

这显然很糟糕，不能一直这样下去。

固定元素是.scroll-wrapper 的兄弟姐妹、前辈还是祖先似乎并不重要。据我了解，每当您悬停固定元素并滚动时，浏览器都希望滚动固定元素的内容和滚动包装器。

到目前为止我的想法：

1. 要么获取新的解决方案，以防止地址栏在滚动时滑开。
2. 或者以某种方式滚动使浏览器忽略滚动固定元素的尝试，而是滚动其下方的元素，同时保持固定元素可悬停和可点击。
3. 或者以某种方式将mousewheel DOMMouseScroll 等传递给.scroll-wrapper

route 2. doesn't 不是那么有希望，我只是找不到任何可以使 route 1. 发生的事情，所以.. 关于如何完成 3. 的任何想法。选项？

这里有一个CodePen 来说明问题。 https://codepen.io/katerlouis/pen/LQeNbN

Answer 1

奇怪..刚写完文字和CodePen，我找到了一个解决方案作为建议-How to scroll a scrollable div when scrolled on other, non-scrollable div?

解决方案 3. 是可能的！

关键是从固定元素上的wheel-事件中获取e.deltaY，并将其添加到.scroll-wrapper。如果你想用 jQuery 来做，deltaY 在e.originalEvent 中是“隐藏的”

$(".fixed-element").on("mousewheel DOMMouseScroll wheel MozMousePixelScroll", function(e) {
    e.preventDefault();
    $(".scroll-wrapper")[0].scrollTop += e.originalEvent.deltaY;
})