Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scrolling ScrollMenu will also scroll parent container's vertical scroll

See original GitHub issue

Describe the bug When the ScrollMenu is under a container with vertical scrolls, mouse wheel scrolls both of them.

To Reproduce

Create a div with height:100000px and overflow-y:scroll
Put your ScrollMenu with a few items under the div
Try to scroll ScrollMenu with your mouse wheel
It will scroll both of them :c

Issue Analytics

State:
Created 3 years ago
Reactions:7
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

asmyshlyaev177commented, Aug 10, 2021

Check out example for V2, https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu/blob/main/example-nextjs/helpers/useHideBodyScroll/index.ts

0reactions

asmyshlyaev177commented, Mar 19, 2022

Yea, because I was talking about the last link you posted in this issue, sorry for misunderstanding.

Check out example for V2, https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu/blob/main/example-nextjs/helpers/useHideBodyScroll/index.ts

Just moved it to other folder https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu/blob/main/example-nextjs/helpers/usePreventBodyScroll/index.ts

Top Results From Across the Web

How to allow vertical scroll on a container and horizontal ...

This scrollable div must allow: vertical scrolling; elements outside of the container (horizontal overflow). Attempts and results: When overflow ...

Making a div vertically scrollable using CSS - GeeksforGeeks

Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar.

Using CSS Overscroll-Behavior To Prevent Scrolling Of Parent ...

Ben Nadel demonstrates that the CSS property, overscroll-behavior, can be used to trap the mouse scroll wheel within an overflow container.

How To Create Horizontal Scrolling Containers - codeburst

Let's first create our container and our children divs inside of it that will scroll horizontally. The HTML is pretty simple. <div class="scrolling-wrapper">...

react-horizontal-scrolling-menu - npm

Items width will be determined from CSS styles. For navigation, you can use scrollbar, native touch scroll, mouse wheel or drag by mouse....