When you scroll a 'div element with horizontal scrolling enabled', it causes the parent element to also scroll

My latest project involved building a TabbarController that allows users to swipe through different tabs. To enable this functionality, I utilized 'touchstart', 'touchmove' & 'touchend' events. However, I encountered an issue where scrolling in one tab would trigger the parent container to scroll as well, disrupting the user experience. This led me to wonder if there is a way to restrict the scroll behavior to the child tab only and prevent touch events from being passed on to the parent container.

I experimented with solutions such as applying 'overflow:hidden' to the parent div and attempting to use 'preventDefault()' on touch events, but have yet to find a satisfactory resolution.

javascripthtmlcssreactjs

Answer №1

After much thought, I devised a solution to address my specific issue. My approach involves iterating through the DOM objects to identify scrollable areas within child elements when the Event callback returns to the Parent element where the listeners were initially added. The Touch Event will not be processed for the parent if the current touched child contains scrollable content.

var element:HTMLElement = event.target;
var cancel:boolean = false;

while (element && element.parentElement){
      if (element.scrollWidth > element.clientWidth){
          cancel = true;
          break;
      }
          element = element.parentElement;
}

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

Add formatting to specific list items within the Ui Fabric Nav element

https://i.sstatic.net/BcCbj.png Please take a look at the provided screenshot. In the list, some items are marked with an eye icon to indicate that they are hidden and not important for the user's immediate attention. However, this icon seems to have ...

cssreactjsoffice-ui-fabric

How can the parameters -i -u "clientId:" be interpreted when translating a curl command into Ajax?

As I work on integrating a 3rd party API into my website, I am currently in the testing phase using Postman (the Chrome Extension) before proceeding to write my AngularJS Service with $http. However, there is one aspect of the process that has me puzzled. ...

javascriptangularjsajaxcurl

Testing the search functionality of an input box using the React testing library

I have a QueryInput component: function QueryInput({ query, setQuery }) { return ( <div> <div> <input onChange={e => setQuery(e.target.value)} type="text" placeholder="Type your query...& ...

reactjsunit-testingjestjsreact-testing-library

Why does the alt text show up when the gif image fails to display?

While transitioning between pages, I am using a GIF image as a 'loader'. However, during the first 2 or 3 navigations, I can see the image, but for the rest of the transitions, instead of the image, I can only see the "alt" text that I have provi ...

htmlcssimagegifloader

What is the best way to delete a specific item class from a child element using CSS and React?

I am looking for a solution to remove a class or its effect if the parent element does not have a "thanks" element, or have the option to refer to its reference to enable selection. I have been searching online without success and need some suggestions. Th ...

reactjsmenuparent-child

Updating State and Modifying URL in ReactJS when Input Changes

I am currently attempting to modify the state and URL onChange within a <Input type='select'> element, utilizing reactstrap. import React, {Component} from 'react' import { Input, } from 'reactstrap' export default ...

javascriptreactjsurl

Tips on creating a "CSS3 blink animation" using the visibility attribute

I'm attempting to create an old-school blink effect on some DIVs. They should start off as invisible and then quickly become visible for a moment, repeating this sequence in an infinite loop. According to CSS specifications, the "visible" property is ...

cssvisibilitycss-animationskeyframe

"Enhance Your Design: Creative CSS Animation Effects for Underlined

I've been experimenting with incorporating animation into material-UI, specifically making the underline move from left to right for a tab. Here's the code I've come up with: const useStyles = makeStyles({ link: { padding: "1rem&quo ...

htmlcssreactjsmaterial-ui

Issues with css positioning in mobile app container [Tailwind CSS] [React]

I am currently working on a football app and I encountered an issue with positioning a div on top of another. The problem arises when I scroll down, as there is a gap between the two divs. I want the top div to stay fixed in its position even while scrolli ...

reactjsmobiletailwind-css

What is the process of constructing model data?

I have been tasked with creating a mini Amazon web app, using the following code as model data. The file itemsAvailable.js contains an array of products sold on the mini Amazon platform, and promotion.js stores data on promotions that each user can recei ...

reactjs

The system has encountered an issue: "EntityMetadataNotFound: Unable to locate metadata for the entity named 'User

Just wanted to reach out as I've been encountering an issue with my ExpressJS app recently. A few days ago, everything was running smoothly without any errors. However, now I'm getting a frustrating EntityMetadataNotFound: No metadata for "User" ...

javascriptnode.jstypescripttypeorm

Tips for displaying a loading spinner each time the material table is loading

Hey there, I'm currently working on an Angular project where I need to display a table using Material Table. To indicate that the table is loading, I've defined a variable called isLoading. Here's how it works: In my TypeScript file: @Com ...

javascripthtmlangular

Node.js process locks up

I am encountering a perplexing issue with a massive script consisting of 3 modules, each with around 2000 lines of code. This script runs approximately 3000 times per day on my Linux server. However, several times a week, it inexplicably freezes. Althoug ...

javascriptnode.jsprocessfreeze

Optimize React Functional Components to Prevent Unnecessary Re-Rendering

I'm currently using Hooks and struggling to prevent re-rendering. The issue arises when I use scrolling for overflowing items in a div element. Whenever I focus on an item using onMouseOver, the functional component ends up re-rendering itself, causin ...

reactjs

Extracting Section Titles from INI using PHP

I've spent all night trying to perfect this code with no luck. I'm not even sure what to search for at this point. Here's the situation: I'm using PHP to parse .ini files into an HTML table. This is the code in my html file: <?php ...

phphtmlparsingini

What is it about Kyle Simpson's OLOO methodology that seems to swim against the tide of Typescript's popularity?

Disclaimer: this post might come across as impulsive. Warning for Typescript beginners! Also, a bit of a vent session. Recently, I delved into the OLOO approach from the YDKJS book series within a Typescript and Node environment. // ideal JS syntax le ...

javascripttypescript

Eliminate the use of burger icons in a theme inspired by the

Is there a way to eliminate the burger menus in the "Eighties" Wordpress theme and substitute it with a classic navigation menu (logo on the left & menu on the right) positioned above the header image? I've attempted to modify the header.php and func ...

phpcsswordpressnavigation

JavaScript / jQuery load function for removing / adding items

I'm attempting to create an animation where I delete one element and then add another, repeating in a loop. I have achieved this with buttons, but I am looking for a more animated approach. $("#div1").remove(); $("#div2").prepend("Some prepended tex ...

javascriptjqueryonloadprepend

I'm wondering why my element is aligning itself with its sibling. It seems that when the parent has overflow set to hidden, it causes the children's

Let me break down the diagram below for you: The main box is marked in yellow and serves as the parent element. Within this parent box, there are two child elements, one in black and one in cyan. To hide any excess content of the cyan box that overfl ...

htmlcssoverflowmargin

What are the steps for creating an HTML table with rowspan and colspan functionalities?

Is it possible to create a table with rowspan and colspan using HTML? https://i.sstatic.net/bKQrJ.jpg I am looking for guidance on how to construct a table with specified row spans and column spans. <link rel="stylesheet" href="https://stackpat ...

htmlbootstrap-4