Looking to prevent horizontal scrolling on smartphones in an HTML webview - how can I do this?

Currently, I am dealing with a webview and encountering some peculiar behavior.

The overflow-x property is set to hidden, which works perfectly on browsers. However, when accessed on a mobile device, the overflow seems to be ignored completely.

Here is the URL for reference:

Upon trying to open the menu, it functions as expected. Nevertheless, I am able to scroll the content leftwards, a phenomenon not observed in browsers.

I am aware of the option to disable scrolling entirely using jQuery, but I am struggling to find a proper solution to disable horizontal scrolling only.

Any advice or recommendations for resolving this issue would be greatly appreciated!

htmlcsswebview

Answer №1

After some tinkering, I was able to fine-tune it using touchmove. Special thanks to nobody for the assistance.

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

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

javascripthtmlcssowl-carousel

What are the reasons behind the ineffectiveness of !important in CSS?

I am looking to increase the font-size of all text on my website to 200%, you can find some test code in this Fiddle link. If it is a PX issue, why does the code work when I add the style to "<h2>"? <div> <h2 class="test" style="font-size:300 ...

htmlcss

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

htmlreactjscssmaterial-ui

Tips for automatically adjusting the height of the footer

Is there a way to dynamically adjust the height of the footer based on the content length inside the body? I've been exploring solutions like setting the position of the footer as "fixed," but it seems to stay at the bottom of the screen, which is no ...

htmlcss

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

htmlcss

Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page. However, if you click on the h3 tag (Category1) ...

javascriptjqueryhtmlcss

I'm having trouble with my Typescript file in Vscode - every time I try to edit the css code, all the text turns red. Can someone

Check out this visual representation: [1]: https://i.stack.imgur.com/9yXUJ.png Followed by the corresponding code snippet. export const GlobalStyle = createGlobalStyle` html { height: 100%; } body { background-image: url(${BGImage}); ba ...

javascripthtmlcsstypescriptvisual-studio-code

Creating a complete webpage using HTML

Is there a method to load an HTML file and execute the embedded javascript to create a complete HTML page programmatically similar to how browsers do? Edit 1 - I am working on an application where I need to extract data from an HTML page on a remote websi ...

javascripthtml

Creating sibling classes with tailwind using the map function

Currently, I am combining tailwind, react, and nextjs to develop a website. My goal is to implement the check radio button technique to dynamically display different content on the website without relying on JavaScript. To streamline data management, I am ...

cssreactjsnext.jscss-selectorstailwind-css

Incorporating a feature that displays one show at a time and includes a sliding animation into an

Hey there! I have this show/hide script on my website that's been working well. However, there are a couple of things I need help with. I want to modify the script so that only one div can be shown at a time. When a div appears, I'd love for it ...

javascriptjqueryhtml

Issue with JavaScript HTML Section Changer not functioning properly

I need to implement a button that switches between two pages when pressed. Although the code seems simple, I am struggling to make it work. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

javascripthtmlcss

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

htmlcss

Align the label vertically with the corresponding input field

I am currently in the process of revamping an old HTML form to eliminate the use of tables. I found a solution on this site to give the label a fixed width, and here is how it looks in the current code: HTML <div id="form"> <label for="field ...

htmlcssvertical-alignment

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

HTML - implementing a login system without the use of PHP

While I am aware that the answer may lean towards being negative, I am currently in the process of developing a series of web pages for an IST assignment in Year 9. Unfortunately, the web page cannot be hosted and our assessor lacks the expertise to utiliz ...

javascriptphphtmlauthentication

Replace the css variables provided by the Angular library with custom ones

Having an angular library with a defined set of css variables for colors applied to components, which are globally set like this: :root { -color-1: #000000; -color-2: #ffffff; ... } In my application utilizing this library, I need to override ...

htmlcssangular

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript

What is the best way to access the iframe element?

This is main.html <body> <iframe id="frame" src="frame.html"></iframe> <script type="text/javascript"> document.getElementById('frame').contentWindow.document.getElementById('test').innerHtml = &apos ...

javascriptjqueryhtmliframeparent-child

Using an icon font as a background in CSS attribute

I am struggling to replace a background image in CSS with an icon font instead of an icon image. I have been unable to accomplish this task. Here is the CSS property I am working with: .social-networks .twitter{background:url(../images/social/twitter.png) ...

htmlcsswordpressicons

Limit the container's height to be no more than the height of the

Seeking input on good and bad practices in CSS/HTML/jQuery, I recently asked a question about determining when it is appropriate to use jQuery to set container dimensions. The responses I received were helpful (view them here). Realizing that jQuery may n ...

htmlcss