How Much Support is There for -webkit-overflow-scrolling: touch?
-webkit-overflow-scrolling: touch is a CSS property that enables smooth scrolling for elements with overflow. It is primarily used to enhance the scrolling experience on mobile devices. However, its support is limited and mainly restricted to certain webkit-based browsers.
Browser Support
Desktop Browsers
| Browser | Version | Support |
|---|---|---|
| Chrome | All versions | Yes |
| Safari | All versions | Yes |
| Firefox | All versions | No |
| Edge | All versions | No |
| Opera | All versions | Yes |
Mobile Browsers
| Browser | Platform | Version | Support |
|---|---|---|---|
| Chrome | Android | All versions | Yes |
| Safari | iOS | All versions | Yes |
| Firefox | Android | All versions | No |
| Samsung Internet | Android | All versions | Yes |
Usage
The -webkit-overflow-scrolling property can be applied to any element that has overflow set to auto or scroll. The following code shows an example of its usage:
<div style="overflow: auto; -webkit-overflow-scrolling: touch; height: 200px; "> <p>This is a long paragraph that will be scrollable. </p> </div>
Alternative Approaches
Due to limited browser support, using -webkit-overflow-scrolling: touch is not always a viable solution. There are alternative approaches to achieve smooth scrolling in all browsers.
- Using the overflow-anchor property:
- Using the scroll-behavior property (for smooth scrolling on scroll to element):
- Employing JavaScript libraries for customized smooth scrolling effects:
Conclusion
-webkit-overflow-scrolling: touch is a useful feature for enhancing scrolling experience on mobile devices, but its limited browser support can pose a challenge. If your application requires wide browser compatibility, consider exploring alternative approaches to smooth scrolling.