1

We all know the 100vh jump on mobile browsers (CSS3 100vh not constant in mobile browser)

In order to prevent that from happening, I wrap the pages scrollable content in a separate div, which works great!

But I still need some fixed elements. When you now hover the fixed elements and try to scroll, the scroller-div doesn't get scrolled, like body would have with "normal scrolling".

This is obviously really bad and can't stay like this.

It doesn't seem to matter if the fixed elements are siblings, predecessors or ancestors to the .scroll-wrapper. As far as my understanding goes whenever you hover a fixed element and scroll, the browser wants to scroll the fixed elements contents and the scroll-wrapper.

My ideas so far:

  1. Either get a new solution for keeping the address bar from sliding away on scroll.
  2. Or somehow scroll make the browser ignore the attempt to scroll the fixed element and instead scroll the element underneath it, while keeping the fixed element hoverable and clickable.
  3. Or somehow pass on the mousewheel DOMMouseScroll etc. to the .scroll-wrapper

route 2. doesn't is not so promising and I just can't find anything to make route 1. happening, so .. any ideas on how to accomplish the 3. option?

Here is a CodePen to illustrate the problem. https://codepen.io/katerlouis/pen/LQeNbN

katerlouis
  • 536
  • 6
  • 16
  • Does this answer your question? [A way to scroll an underlying div when mouse is on top of a fixed div?](https://stackoverflow.com/questions/13494850/a-way-to-scroll-an-underlying-div-when-mouse-is-on-top-of-a-fixed-div) – biw Dec 20 '19 at 23:00

1 Answers1

0

strange.. just when the text and CodePen were finished, I found a solution as a suggestion – How to scroll a scrollable div when scrolled on other, non-scrollable div?

solution 3. is possible!

the key is to grab the e.deltaY from the wheel-event on the fixed-elements, and add this to the .scroll-wrapper. If you want to do it with jQuery, the deltaY is "hidden" in e.originalEvent 

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