Looking for a vertical scrollbar solution for your idangerous vertical swiper?

Incorporating idangerous vertical swiper with two slides in a mobile app through jquery mobile has proven challenging. Specifically, I am struggling to implement a vertical scroll bar in the second slide due to its fixed height and the potential collision between swiper events and scrolling events. Despite multiple attempts, I have yet to find a solution to this issue.

Thank you, E. Ramesh Babu

Answer №1

Are you in search of something similar to this design?

CSS:

.swiper-slide:nth-child(2) {
    overflow-y: scroll;
}

It really is as straightforward as that.

SEE DEMO HERE

Additionally, here's how to make it vertical

VIEW DEMO HERE

Answer №2

For optimal performance on mobile gadgets, it is recommended to utilize

e.stopPropagation();

on the specific element you wish to enable scrolling for during a touchstart event.

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

Steps to clear a form after submitting it

Hello all, I have a rather complex form that sends a message successfully with an alert after submission. I'm wondering how I can clear the entire form once it has been submitted to make it simple? Below is my HTML Form and JavaScript code. I would l ...

Troubleshoot: jQuery unable to load JSON data

section, I am working on loading multiple products onto a page section utilizing data from a JSON file. Initially, I implemented this using JavaScript successfully, but I am inclined to switch to jQuery. Despite the absence of errors in the console, the d ...

Retrieving a JSON object using a for loop

I'm working on a basic link redirector project. Currently, I have set up an Express server in the following way: const express = require('express'); const app = express() const path = require('path'); const json = require('a ...

Explore lengthy content within Angular 2 programming

I have a lengthy document consisting of 40000 words that I want to showcase in a visually appealing way, similar to HTML. I aim to include headers, paragraphs, and bold formatting for better readability. Currently, I am developing an Angular application. D ...

Having trouble retrieving data when updating a user in ExpressJS

Trying to update an experience array in the User model with new data, but facing issues with saving the data in the exec function. As a result, unable to push the new data to the array on the frontend. Here is the current code snippet: router.post('/ ...

JSON - The challenge of incorporating single quotes within double quotes

In my current scenario, I am using the following code to populate form fields. The code is designed to handle a JSON dataset that has been encoded with PHP's json_encode function. Everything works smoothly when dealing with either single or double qu ...

When attempting to chain middleware in next-connect, an issue arises with the error handler

I have the following pair of middleware functions: function validateEmail(req, res, next) { console.log('email validation'); if (req.body.email && req.body.email.match(EMAIL_REGEX)) { console.log('email OK!'); return ...

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

Issue with Firefox translateZ causing only half of the content to be visible on initial load in Pure CSS Parallax configurations

Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...

Troubleshooting PHP/MySQL integration with Google Maps - issues persist

I have come across several other posts on this theme but unfortunately, none of them have been able to help me. I am using the article https://developers.google.com/maps/articles/phpsqlajax_v3, however, the code provided is not working for me. I have a fil ...

Applying CSS transformations to scale up a div within its parent body

Having an issue with formatting an anchor link using transform scale attributes on hover. The link is inside a div that's aligned to the right, and I want it to enlarge when hovered over. However, this increase in size also affects the parent div, ca ...

Modifying a Nested Component with react-icons

As I work on creating a rating component that utilizes react-icons to display icons, I have encountered an interesting challenge. Currently, I am using the FaStarhalf icon which represents a pre-filled half star that can be flipped to give the appearance o ...

The Angular component router-outlet is not recognized as a known element

I have encountered an error message: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add ...

Implement Infinite Scrolling Pagination in WordPress

I'm completely new to Wordpress and currently utilizing the FoundationPress theme. My goal is to include a button that users can click on to load more posts. Essentially, I want users to see four blog posts initially and then be able to load the next ...

utilizing jquery ajax for image uploading with php and mysqli

When trying to upload an image URL using AJAX into the database, I encountered an error upon submitting the form. My goal is to upload the image URL into the database without refreshing the page. The specific error message I received was: GET 400 (Bad Re ...

Is it possible to render a web page in C++ that includes JavaScript, dynamic html, and retrieve the generated DOM string?

Is there a way to fetch and extract the rendered DOM of a web page using C++? I'm not just talking about the basic HTTP response, but the actual DOM structure that is generated after JavaScript has executed (possibly after allowing it some time to run ...

Stop allowing the entry of zero after a minus sign

One of the features on our platform allows users to input a number that will be automatically converted to have a negative sign. However, we want to ensure that users are unable to manually add a negative sign themselves. We need to find a solution to pre ...

What strategies can I employ to help JSDoc/TypeScript recognize JavaScript imports?

After adding // @ts-check to my JavaScript file for JSDoc usage, I encountered errors in VS Code related to functions included with a script tag: <script src="imported-file.js"></script> To suppress these errors, I resorted to using ...

Font malfunctioning on Microsoft Edge and Internet Explorer

Apologies if this seems like a silly question, but I recently imported a font from my computer into a CSS file. While it displays correctly in Chrome, it's not working in Microsoft Edge or Internet Explorer. Unfortunately, I don't have access to ...

Activate the clicked tab in the Bootstrap navbar when selected

I have gone through similar posts, but I am unable to get mine to work. My goal is to activate the clicked tab. Here is what my bootstrap navbar looks like in HTML: <div class="navbar navbar-default" role="navigation"> <div class="container" ...