javascript - 将鼠标悬停在固定元素上时无法滚动可滚动的 div

Question

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

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

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

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

固定元素是 .scroll-wrapper 的同级元素、前辈元素还是祖先元素似乎并不重要。就我的理解而言，每当您将鼠标悬停在固定元素上并滚动时，浏览器就会滚动固定元素内容和滚动包装。

到目前为止我的想法:

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

路线 2. 并没有那么有前途，我只是找不到任何让路线 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;
})