Snap scroll CSS too fast/jumpy in Chrome but works fine everywhere else

Question

Very new to this but I have a page of sections that I have a scroll snap function, but when viewed on chrome the transition isn't smooth at all, it jumps from one section to the other far too quickly. Is there any way to solve this??

https://www.matthewjameswilson.com/

This is the code I am using:

html {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px 0 0 0;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Does this answer your question? [Smooth Scrolling in CSS](https://stackoverflow.com/questions/53543484/smooth-scrolling-in-css) — Mohamed Raza, Aug 08 '21 at 17:15

score 0 · Answer 1 · answered Aug 08 '21 at 17:17

0

you have missed to add an smooth attribute scroll-behavior: smooth; on CSS

html {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px 0 0 0;
  scroll-behavior: smooth;
}

answered Aug 08 '21 at 17:17

Mohamed Raza

818
7
24

3

added the ```scroll-behavior: smooth ``` but no change when viewed on Chrome. Especially bad with mouse scroll, not too bad with touch pad. Thank you for your help though! – Matthew Wilson Aug 09 '21 at 20:46
can you put your code into codepen. so I can check and update the answer – Mohamed Raza Aug 09 '21 at 21:33
Did you get the outcome? scroll-behavior: smooth is not smooth as I want, can I adjust scroll time? – Neo.Mxn0 Dec 23 '21 at 14:01
yes which works perferctly – Mohamed Raza Dec 23 '21 at 15:33

score 0 · Answer 2 · answered Dec 15 '22 at 22:33

0

I just faced the issue but I think the issue is when we scroll with the mouse then it scrolls very fast that's why it is behaving like this. Try to scroll by using a laptop or tap or mobile it will work as expected on chorom too.

answered Dec 15 '22 at 22:33

Muhammad Hamza

1

score 0 · Answer 3 · edited Feb 10 '23 at 10:16

0

scroll-behavior: smooth;

Fixes only when scrolling by clicking an <a> tag. An issue is getting that smooth scroll when scrolling with the mouse wheel.

edited Feb 10 '23 at 10:16

F. Müller

3,969
8
38
49

answered Feb 07 '23 at 20:06

Pavlo Vovzhynskyy

1

Snap scroll CSS too fast/jumpy in Chrome but works fine everywhere else

3 Answers3