Menu
I've been searching far and wide through documentation regarding -webkit-overflow-scrolling: touch;, but I can only get it to work partially for my <body> element this way...
<body style="-webkit-overflow-scrolling: touch;"> or like this...
<body style="overflow-y: auto; -webkit-overflow-scrolling: touch;"> In iOS, my page will scroll with momentum about a fourth of the way down in the page, but then stop. So -webkit-overflow-scrolling: touch does work for a "part" of the body
Without this code, it will scroll all of the way through the page, but with no momentum and with a lot of jerky motion.
414
In the Chrome browser, do the following. Type chrome://flags and hit Enter. Search for 'smooth'. Select Enabled against Smooth scrolling and restart the browser.
Safari 15.4 adds support for CSS scroll-behavior as detailed in the 15.4 release notes. Added support for the CSS scroll-behavior property and ScrollOptions, allowing smooth scrolling to anchors or via JavaScript. I've tested and it works on 15.4 (Safari Technology Preview).
With smooth scrolling, it slides down smoothly, so you can see how much it scrolls. This might not be a huge deal for you but it is a big deal for users who read a lot of long pages. The choppy scroll might be annoying for a lot of users and that's why people are moving towards the smooth scroll option.
What about applying the -webkit-overflow-scrolling: touch; to all elements of your site:
* { -webkit-overflow-scrolling: touch; } And you should create an extra CSS file instead of using the css attribute.
80
overflow should be 'scroll'
ref: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
