I am trying to disable horizontal scrolling in an iframe on my website, particularly when a user uses touch input and drags horizontally. The scroll bars can still be visible and draggable when touched directly. Unfortunately, I do not have control over the content displayed in the iframe.
After researching online, I found that it is challenging or perhaps impossible to achieve this. I attempted:
- Setting
scrolling=noas an attribute for the iframe (which disables both scrollbars) - Adding
overflow-x: hiddenas a style to the iframe (but it had no effect)
I will primarily be using touch controls on a large display to interact with this iframe, so it is acceptable if the solution only works for touch inputs. Is there a way to manually override touch events to detect horizontal scrolling attempts in the iframe? This implementation only needs to function on the latest version of Chrome.