make scroll-snap-type: x mandatory works with scroll-behavior: smooth;
Hello, I wonder if someone made
scroll-snap-type: x mandatory; work with scroll-behavior: smooth; with no js. For now, scroll-behavior: smooth; gets cancelled for some reason.47 Replies
can you please post your code into codepen.io or codesandbox ; we wont know what the problem is wihtout it
here it is I hope it's a good mwe :
https://codepen.io/yoyo83/pen/zYVzBBy
That looks like it is working correctly as far as I can see.
What browser are you using?
when you click on the top number it doesn't "smoothly" slide
It does in my tests (Chrome and Firefox on Mac).
If I remove the
scroll-behavior : smooth; from your CSS it does jump but with it everything is smooth.oh my chrome and my edge doesn't for some reason
working sometimes but most of the time just jumping
I guess it's still ok for my site and if it works for most people its a +, thank you !
same problem for me with Chrome and Edge on windows 11 no smooth transition. Smooth transition works fine on Firefox. So Chromium on windows bug maybe??
Do you have a lot of tabs open?
Apparantly Chrome can deactivate smooth scrolling automatically if it has a lot of tabs open.
I've got maybe 4 or 5 tabs open. So I guess I wouldn't say that's a lot. Seems like if I close and reopen the browser the page will smooth scroll to the first one I click and then with anything else I click the smooth scrolling is gone. Reloading the page doesn't allow the smooth scroll just a closing and re opening of the browser...
Works on safari mobile. Try moving the scroll behaviour to the html selector instead of the main and see if that helps. If not try to target the main in JavaScript and add an event listener on scroll and add the behavior: smooth there
working on my phone's chrome too and I tried the star selector for the scroll-behavior didn't work either, didn't try the js way thought. This is only when scroll-snap-type is active (mandatory or proximity), otherwise smooth behavior works fine.
For now the windows 11 + chrome seems to be the issue (my case too) then so yes chromium may be it, no idea what it does exactly and why it would lead to that
Working for me on Chrome and Edge on Windows 11...
just to confuse things more 😄
oh so that's not it I'm lost
wait, not on edge. working in chrome though
Try scroll behaviour just on the html not the star
wow, this kind of mwe happening in one computer out of two hurts, maybe it's about chrome version : 127.0.6533.89
Are both computers the same oS?
not working either (maybe because it's a scroll on the main only)
oh, i need to update chrome, i'm on 126 - edge i'm on 127, could be a new bug introduced to 127, let me save some things and update chrome
I don't think so since my edge is 127.0.2651.86 and not working either
can confirm, it's a bug in 127.
Worked in chrome 126, when I updated, it broke
okkk
Oh whoops I’m remembering my reset wrong I thought it inherited down. Try the JavaScript too
nice but not nice for our beloved css programers
Time for a bug report 😄
yes never done it thought and too shy
I'll do it 🙂
thanks
Think I'll make a video on reporting it, to show how easy it is 😄
oh, I fixed it in making a new demo to report it, lol
In the current version of the codepen, you've moved the scroll-behavior: smooth to the html element.
If it's on the
main, it works for me in all browsers.They did have it on the main initially before I told them to try the html just fyi
I've tried a few different things now and it's always working for me 🤷
so its a computer specific thing then
but yeah if you wanna make a video to clarify that it has to be within the scope of the overflow slide, you could also say that the new animation-timeline thing only work on global slide which I hate so bad but it should get better and better with time, for now, if it is for advance bahavior, I feel like js is still the way to go
animation-timeline can work with any scroller 😄
support is only Chrome atm, but there is an
timeline-scope property now too
https://codepen.io/kevinpowell/pen/ZENXRGRoh ok i changed the mwe with it maybe I did something wrong but I can't make that work too I feel so bad but view() work thought, https://codepen.io/yoyo83/pen/zYVzBBy
If someone tell me its working perfectly (the after with the animation) I promise I'm dead
win 10 chrome 127 works vivaldi on 126 doesn't 🤣 oh and firefox works to
edge doesn't on 127
I think its really too soon it just happened that 100 videos went out about all scrolling features
Chrome scroll-timeline should work. Pay attention not to just the browsers that work/don’t work but also the oS. Even if you have downloaded the “Chrome” app on an iPhone the actual browser engine is WebKit not Blink . So it’s Safari with a Chrome “skin”
Same with Firefox on iPhone and iPad too btw its WebKit
yes for timeline I just didn't play with it enougth for sure
Kevin's exemple works perfectly so I just did something wrong
Also just want to mention the syntax has changed a bit since KPows video last fall. Make sure you’re referring to the latest video and referencing MDN or Chromes pages on Scroll-Driven Animations
If all else fails you can look into a polyfill , or maybe GSAP
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations
GitHub
GitHub - flackr/scroll-timeline: A polyfill of ScrollTimeline.
A polyfill of ScrollTimeline. Contribute to flackr/scroll-timeline development by creating an account on GitHub.
thanks for all those !
Hey! While I was playing a little with modern CSS features on chrome, I faced the same issue with this small GitHub achievements reproduction 😕 https://codepen.io/lcsga/pen/ZYzzxOV
Maybe it simply don't work on the html selector 🤔 I'll try something else tomorrow (am on phone rn)
Double check there's no
prefers-reduced-motion: reduce emulation on your browser as that will deactivate smooth scrollI'm not in front of my computer but it does it on mobile too + it did even with my dev tools closed (if I'm not wrong, closing it would interrupt the emulation)
(I'll still double check asap)