Prevent body from scrolling when dropdown is active

It is really hard to be precise about how much to scroll to reach the end of the dropdown. What usually ends up happening is that I overscroll and the main body starts to scroll.

I was thinking if we would want to disable scrolling on the body when the dropdown is active or at least when the mouse is hovering the dropdown.


This is more obvious on iPhone and Android mobile devices.

And separately:
I’ve even seen some iPhone devices scroll the page randomly even though not at the bottom or top of the menu scroll - but this was with some site customisations.

iPhone clearly needs a bunch of full height things …

  • search
  • hamburger
  • composer

I wonder though how relevant this topic is in light of this redesign

1 Like

This is interesting. I just tested on Firefox and this problem doesn’t occur.

I have Firefox latest.

It doesn’t happen with scrolling at the end of the hamburger. But it does if I scroll inside of Notifications, Search, or Avatar.

It has never bothered me much, but I guess that doesn’t mean it couldn’t be a problem for others.

I believe this problem might have been mentioned in this Gotcha video by Paul @ 2m15s from back in January:

It starts with “Did you know you can’t stop the body from scrolling?”…
… he mentions there is something coming along the pipeline in “spec land” - but there is now way currently of controlling it.

Obviously - there might be something now because that was 6 months ago.

P.S. other parts of the video are interesting too, worth a watch