Scroll-Snap-CSS - mouse wheel problem

Design help Custom code
1

I’m working on implementing CSS scroll snap, in a preview mode everything works as expected, but on the published site the scroll wheel stops working as soon as the website reaches the section with the black and white gradient. Touch and scroll bars work but the mouse won’t, can someone help me figure out what is causing this odd behavior, please?

2

https://preview.webflow.com/preview/scroll-snap-css?utm_medium=preview_link&utm_source=designer&utm_content=scroll-snap-css&preview=64be10caf60555362329472567a6ebbc&mode=preview

https://scroll-snap-css.webflow.io/

3

Works as intended in chrome and firefox on the live link.

4

are you on windows or mac? (the problem is happening on windows in chrome)

5

Tried windows. All is good. Well, apart from horizontal scroll which obviously doesn’t work with regular mouse

6

Here is how it works for me.

7

are the sections snapping? it is hard to tell from the video… when I open the published website in chrome (newest stable version) the snapping works but when I reach the gradient the scroll wheel on my mouse stops working. In Edge the snapping doesn’t work at all even though it should be supported.

8

and in Firefox the snapping works but with “one click” on scroll wheel the page scrolls all the way to the next section…

9

Yes

Well, it works for me alright.

Oof, sorry, no experience with Edge.

Yes, that’s actually awesome, and its the same as using something like fullpage,js but natively!

1 Like
10

well yes it looks very sleek, but it doesn’t function as it should because the gradient section is 3000px and it literally just jumps over it to the next section so do user can actually scroll and see the content

11

Which use case are you talking about now? Again, don’t see such behaviour. Both browsers show gradient section at the top, then you scroll through it without snapping until the next section. It would be more convenient if you took a screencapture of your issues.

12

https://drive.google.com/open?id=1GcyJw0XQBcXvFNapYUYckS28hJ5YKh40

this one shows the chrome browser, you can see my mouse but when I reach the gradient you will see that the scrolling stops and I have to grab the scroll bars…

https://drive.google.com/open?id=18Pi2dNIMMsCbciQcF_-PdOG90U1HlJq5

this one shows Firefox. First using a mouse, at the end touch (touch works as expected)

13

Can you try this on different computers? Again, works as intended here.

14

I don’t have another windows machine easily available to me, but same issue happens on iPad pro…
so I don’t think it is machine related

15

Hi there,

I’ve had a look at the published site version on Chrome/Windows, Firefox/Windows and Chrome/Macbook, for me the middle scroll function seems fine for the snapping behaviour on all sections. (All latest versions).

For Edge the scrolling worked fine but the snapping to top of section action wasn’t working. And the side scrolling for Products was working.

On the Chrome/Macbook test the side scrolling bar functionality for the Products section wasn’t working - there was no visible side scrolling navigation bar.

Hope that helps some.

16

you also try this your main wrapper div “overscroll-behavior: inherit;”
i hope it is solve.