Gesture scrolling transferred to elements under the currently scrolled element

One of the elements on my page is a list that scrolls vertically, named scroll-list-one, and it functions perfectly.

Another element, which contains a vertical scrolling list called scroll-list-two, occasionally appears as a popover over scroll-div-one. The scrolling in this element works fine too.

The problem arises when I scroll scroll-list-two using a swipe touch gesture on mobile. This action causes both scroll-list-two and the one below it (scroll-list-one) to scroll simultaneously.

Is there a way for me to prevent the touch gesture from affecting the element underneath? I want the gesture to only scroll the top element.

htmlcssionic-framework

Answer №1

As per the information at this source, the recommended fix is as follows, which successfully resolved the issue:

Simply include 

-webkit-overflow-scrolling: touch
in the main element

It is worth noting that this issue only affected iOS devices and was not a concern for Android.

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

My navbar has an empty space that I want to fill. I aim to move the search bar all the way to the right - any suggestions on

https://i.sstatic.net/SvTiG.jpg This is the code for my navbar customization: <nav class="navbar navbar-dark navbar-expand-sm fixed-top navbar-custom" id="header-nav"> <div class="container"> <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

When you run the code provided in the link below and scale down the HTML to 50% while increasing the width to fit the window, a scrollbar becomes visible. This only occurs in Chrome and not in Firefox. Click here The content of the DOM can be modified and ...

htmlcsszooming

Using the `not()` CSS selector to target specific children elements

Is there a way to add a specific attribute to all input[type=text] elements while excluding certain elements that do not have a class but their parent does? Here is an example of the HTML structure: <tr class="filters"> <td> <i ...

csscss-selectors

You cannot use the same condition more than once in ng-class

Looking at this code snippet... <div class="row"> <div class="col-md-5"> <span> Comments </span> </div> @*<div class="col-md-7">*@ <div class="col-md-7" ng-class="{'h ...

javascriptangularjshtml

The proper way to incorporate HTML within JSON in Django Templates for safe usage

What is the best way to securely display JSON data in a Django web application? In my Django server, I create JSON data and then display it in a Django template. Sometimes, this JSON data contains snippets of HTML. While this usually works fine, if the &l ...

javascriptpythonhtmldjango

Modify HTML table cell colors based on their values

Hey there, I'm currently working on a project where I need to dynamically change the colors of an HTML table based on values retrieved from a database. To give you a better idea, here is an image showcasing what I am trying to accomplish. https://i.ss ...

phphtml

Arranging elements in a single line using Bootstrap 4

I need to align links in a row at the bottom, such as "Link 1 left bottom", "Link 2 center bottom", "Link 3 right bottom" but "Link 2" is not centered on PC and mobile devices. HTML: <div> <a id="contact" hre ...

htmlcsstwitter-bootstrapbootstrap-4

Logged-in users experiencing issues with their bookings not showing up

It's me again! I am still struggling to display user bookings when the user is logged in. I feel like I might be missing something really basic here, but I just can't figure it out. Below is the code I've been working on. Any fresh eyes or ...

pythonhtmldjango

Manipulating layout with html5 VIDEO controls

I'm having an issue with the HTML5 video element. When I don't use "Controls," it displays with the border-radius as I specified. https://i.stack.imgur.com/KMEeJ.png However, when I add controls (which I need), an ugly border appears and overri ...

htmlvideo

Having trouble navigating through a dictionary within the Django template

I am working with a dictionary that contains information about titles, URLs, and types. After passing it into the template, I want to display the first title along with its type and URL. Here is an example of the data: a = {'title': ['Turni ...

pythonhtmldjango

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

javascriptjqueryhtmlcss

Creating a Dynamic Soundtrack: How to Embed an Audio

Success! I finally figured it out, with a little help from everyone. I've been diving into the world of Audio Playlists in HTML and attempted to follow a tutorial on the topic found here: https://www.youtube.com/watch?v=vtZCMTtP-0Y. However, I encoun ...

javascriptjqueryhtmlcss

Showing an image on a blurred background-image at the top of the webpage

Is it possible to overlay an image on top of another image, with the top image appearing blurred in the background? .background-image { background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&a ...

htmlcss

How can we prevent checkbox and radio buttons from being triggered by accidental taps on the surrounding area on touch-responsive devices?

On touch screen responsive devices, there seems to be an issue where clicking outside the checkbox or radio button (within about 8px) causes the checkbox or radio button to toggle. This problem only occurs on responsive touch devices and works fine on desk ...

javascripthtmlcheckboxbootstrap-4radio-button

Using CSS and HTML to dynamically show rows in a horizontal line and create a new row when necessary

Can you arrange 3 table rows to display inline, so that after every 3 rows the table will automatically start on a new line and continue like this indefinitely? <?php $addon_name = $_SESSION['Add_On_OpName']; mysqli_report(MYSQLI_REPORT_INDEX ...

jqueryhtmlcss

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

javascripthtml

Altering hues upon clicking the link

I'm looking for a way to set up my menu in the header using "include/header.php" and have it so that when I click on a link, it takes me to that page while also changing colors to indicate it's active. Would jQuery or PHP be more suitable for thi ...

phpjqueryhtmlcss

Adding labels to a JavaScript chart can be done by using the appropriate methods

https://i.stack.imgur.com/uEgZg.png https://i.stack.imgur.com/y6Jg2.png Hey there! I recently created a chart using the Victory.js framework (check out image 1) and now I'm looking to incorporate labels similar to the ones shown in the second image ab ...

javascripthtmlcssreactjsvictory-charts

Tips for concealing broken images in jQuery/JavaScript when generating dynamic content

Is there a way to hide the broken images in this dynamically generated HTML code using JavaScript? Unfortunately, I don't have access to the source code itself. I'm new to JQuery and could really use some assistance. Below is the snippet of the ...

javascriptjqueryhtmlcssimage

Is it appropriate to incorporate the new <main> element in HTML5 yet?

Back on the 16th of December, a new HTML5 extension specification was sent off to the W3C for review. This extension focuses on the <main> element and you can check it out here. Here's a summary: This particular spec builds upon the existing HT ...

htmlsemantic-markupspecifications