Question

我们都知道移动浏览器上的100vh跳转（CSS3 100vh not constant in mobile browser）

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

但我仍然需要一些固定元素。当你现在悬停固定元素并尝试滚动时，scrolller-div不会滚动，就像正常滚动＆＃34;正常滚动＆＃34;。

这显然非常糟糕，不能保持这样。

如果固定元素是.scroll-wrapper的兄弟姐妹，前辈或祖先，那似乎并不重要。据我所知，只要你悬停固定元素并滚动，浏览器就想滚动固定元素内容和滚动包装。

到目前为止我的想法：

要么获得一个新的解决方案，以防止地址栏在滚动时滑落。
或以某种方式滚动使浏览器忽略滚动固定元素的尝试，而是滚动它下面的元素，同时保持固定元素可以浏览和点击。
或以某种方式将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.是可能的！

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

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

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

1 个答案: