By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. When I add the CSS property and set it to touch, it scrolls horizontally as expected. The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser). It only scrolls horizontally, not vertically, as I want. This works fine without -webkit-overflow-scrolling, but I don’t get the native bouncing on the iPhone.

Safari 13 Release notes: Indicates the addition of support for one-finger accelerated scrolling to all frames and overflow:scroll elements, eliminating the need to set -webkit-overflow-scrolling: touch. I have a div that needs to scroll horizontally.Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers Similarly, another way to achieve this is by programmatically adding a new CSS class when the modal is open and removing the class when the modal closes. You should just not use it, since it appears that is only for iOS and what it does is only: 'touch Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen.Apple has a description in the Safari CSS Reference. Im working on a web app that uses -webkit-overflow-scrolling:touch in several places to give the overflown divs inertia scrolling. webkit-overflow-scrolling: auto /* Stops scrolling immediately */ webkit-overflow-scrolling: touch /* Lets it scroll lazy */ Formal syntax -webkit-overflow-scrolling = iOS5 introduced a useful CSS property that brings overflowed elements native scrolling animation: -webkit-overflow-scroll: touch. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. This is going (nearly) like the usual naming convention from css to JS like border-top is becoming borderTop. Use 'regular' scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen. el.style.WebkitOverflowScrolling touch // capital W. webkit-overflow-scrolling: revert-layer The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element. '-webkit-overflow-scrolling' css properties '-webkit-overflow-scrolling'

Css webkit overflow scrolling