Hello,
With the new version of Safari 15.4, the CSS property scroll-behavior: smooth will block the JS scroll on element.scrollTop = xx. The release note says scroll-behavior props will be supported by this new version, but it only blocks scrolls... If I remove the scroll-behavior CSS props, the scroll will work correctly, but of course with no animation. How to scroll with scrollTop but with smooth transition ? There is the good place to report bugs to Safari developers ?
Thanks
element.scrollTo has had its operation change in 15.4 as well.
Under 15.3, I could use a polyfill with scroll-behavior: smooth to scroll horizontally in a container with overflowx: hidden. Now with 15.4, I can't achieve that with or without a polyfill.
My experimentation has found 2 disappointing almost-solutions but neither gets you back to the functionality you could achieve with a polyfill in 15.3.
The options at present:
scroll-behavior to auto and get instant scroll with no scrollbar.overflowx: auto, then scroll-behavior: smooth works as documented. If it's overflowx: hidden I get no movement at all.Neither one is great, and I really do hope this is a bug.
(P.S. sorry to pile on your bug with something that's only mostly related - you're the only other person I've found talking about this and I'm so glad it's not just me).
Count me as one more person very interested in this!
Luckily, the bug is already being tracked here: https://bugs.webkit.org/show_bug.cgi?id=238497
In the mean time, a (very annoying) workaround may look like this:
el.style.overflow = 'auto';
window.requestAnimationFrame(() => el.scrollTo({ left: 100, behavior: 'smooth' }));
setTimeout(() => (el.style.overflow = 'hidden'), 1000);
There are obviously more robust ways to accomplish this (e.g. throttled onScroll watcher to re-apply the hidden style), but this gets the job done at least.
Alternatively, if it works with your UI, you can simply apply a pointer-events: none on the scrolling element to prevent the user from interacting with it.
I can confirm that this is still an issue. adam_miller's response is the only real option I have at the moment.
I hope this gets resolved soon.
This is still occurring in iOS 16.2 despite the 'Resolved / Fixed;' status on the bug tracker : https://bugs.webkit.org/show_bug.cgi?id=238497
ie: having scroll-behavior: smooth in CSS disables the ability to programatically scroll the window.
Removing that CSS makes it work again.