Turning off the ability to horizontally scroll in an iframe using touch controls

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=no as an attribute for the iframe (which disables both scrollbars)
  • Adding overflow-x: hidden as 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.

htmlcssiframescrollhorizontal-scrolling

Answer №1

Without a direct link, it may prove challenging to confirm, but I recommend exploring the CSS property pointer-events: none; or any alternative pointer-event solutions.

Answer №2

There is a potential option to deactivate certain touch events one by one; however, halting scrolling in an iframe along just one axis necessitates implementing workarounds since the scrolling=no attribute has been phased out in HTML5.

An effective approach would be to limit the width of the iframe to no more than the width of the source page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come my header is not spanning the full width of the page?

Hey there, I've been struggling with a specific issue on my website and can't seem to find a solution anywhere else. The header on my site is supposed to stretch across the entire width of the screen, but for some reason, there's always a ga ...

htmlcss

Attempting to extract a parameter from a URL and pass it as an argument to a function for the purpose of locating objects based on

I am trying to retrieve data from a URL http://localhost:3000/share/user=sampleuser to display objects with an author value that matches the one in the URL. However, I encountered an error when attempting to call a function that extracts the value from t ...

javascripthtmlnode.jsmustache

Retrieve the content of the second <li> element using jQuery

Seeking assistance with replacing the separator symbol in a given structure. In order to proceed, I first need to identify its position. Can anyone offer guidance on how to do this? Below is the structure in question: <div> <ul> ...

jquerycsshtml-lists

Clicking the save button in the modal updates the text on both the current tab and any previously clicked tabs

I'm looking to implement tabs that, when clicking on the edit icon, open a modal for editing the content of each tab. The issue I'm currently encountering is that if I open the editor for one tab, close it without saving, then open the editor fo ...

javascripthtmlcss

How can you fix a navbar that won't stay in place?

I'm facing an issue with this example: When I scroll, the navbar moves along due to the fixed property, which affects the overall look. How can I make it disappear when scrolling, while keeping the logo intact? Can someone suggest if this layout is ...

htmlcss

It appears that the React MUI Grid is causing the page or its container to experience overflow issues

I'm utilizing Grid to maintain the organization of the entire page, but I keep encountering an overflow issue when adding multiple Grid items. This results in the scrollbar appearing even though the container size remains the same. Dashboard.tsx is pa ...

cssreactjsmaterial-ui

The input field will be in a read-only state if it contains a value from the database. However, it will be editable if the value

Hello everyone, I am a newcomer to this community and would greatly appreciate your help. I am encountering an issue with the following lines of code: <input type="text" class="form-control" id="fines" name="fines&quo ...

javascriptphphtmlcss

Is there a way to create a universal script that works for all modal windows?

I have a dozen images on the page, each opening a modal when clicked. Currently, I've created a separate script for each modal. How can I consolidate these scripts into one for all modals? <!-- 1 Modal--> <div class="gallery_product col-lg-3 ...

javascripthtmlcssbootstrap-4bootstrap-modal

Rendering HTML in special characters with AngularJS is an innovative way to display

My last question may have been unclear, but I received a similar response from the server asking for clarification. The HTML is not rendering properly here. How can this be resolved? AppControllers.controller('create', ['$scope',' ...

htmlangularjs

There seems to be a Javascript TypeError occurring - it looks like the function document.routeEvent

I am currently working on an old webpage that contains JavaScript. However, there is a function that does not seem to work properly with newer browsers such as Mozilla, Chrome, and Safari. Interestingly, the page functions perfectly fine on Internet Explor ...

javascripthtmlsyntax-error

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5

Assign a value to a variable based on the button that was clicked using a form

My form consists of 8 buttons, each representing a different color: .settings-theme-buttons{ height: 4vw; width: 4vw; border: none; display: inline-block; border-radius: 100%; cursor: pointer; } #settings-theme-white{ b ...

phphtmlforms

Interact with multiple links within a table using Python

In an attempt to automate the process of clicking on multiple links within a table, I have crafted the following HTML code: <div id="gadget-34365" class="gadget-inline" style="height: 905px;"> <div class="results-wrap search-results-dashboard-ite ...

pythonhtmlseleniumselenium-webdriver

Choosing a nested object within a JavaScript object

Is there a way to select the style contents of an object within another object? The data consists of a json encoded array. In my scenario, I am using data[i].replies and getting 2. How can I access data[i].userstyles instead? It seems to be an object. I ...

javascripthtmlarraysjsonobject

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

javascripthtmlcss

What is the best way to reduce the spacing between text?

I am trying to figure out how to reduce the spacing between my text so that it aligns like the example below. Take a look at the text "Welcome to my portfolio". Currently, when I run my code, there is a large gap between "Welcome to my" and "Portfolio". ...

htmlcss

Ways to set up various Content-Security-Policies and headers in your application?

In my email application, I am trying to prevent alerts in JavaScript by using a CSP header. However, even with the current policy in place, alerts can still execute when I send an HTML document attachment that contains script tags. Changing all JavaScript ...

javascripthtmlsecurityxsscontent-security-policy

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

cssjavafxfontsitalic

From HTML to Python CGI to communication with a Serial port

I am having an issue running a Python CGI script to send data to a serial port. Whenever I try to open and set the serial port to a variable, the HTML server crashes. Below is the code snippet that receives a color (red, blue, green) from the HTML page: ...

pythonhtmlcgipyserial

When a div slides down on page load, the div will slide up when a button is clicked

I am trying to make a div slideDown on page load. The goal is to have the div automatically slideDown after 2 seconds, which contains a responsive image and a button named "z-indexed". However, I am having trouble getting the same div to slideUp when the z ...

jqueryhtmlcssslidedownslideup