How to disable horizontal scrolling in an image?

I'm doing an animation-on-scroll page. At the moment, I'm optimizing it for mobile devices.

In case an element is bigger than the actual screen (e.g. bigger than a mobile screen), you're able to scroll in that element (e.g. you're able to scroll horizontally in an image). How can I block that? I've already found out that the e.g. actual x-scroll-position doesn't change when scrolling through an image horizontally.

Because of the animation, I'm not able to set any elements position to relative. Overflow-x: hidden doesn't work in my case.