What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamlined version.

I have not incorporated any images into the design, instead focusing on utilizing CSS3 animations. You can view my current progress on jsbin here. Although I attempted to bind the touchmove event using jQuery, it seems that the alert is not triggering as expected.

My primary goal is to enable smooth scrolling/swiping up and down within the div container without affecting the overall page scroll. Any suggestions or improvements to the code would be greatly appreciated.

This functionality is intended for mobile devices such as iPhones and Android smartphones.

Thank you in advance for your help!

javascriptjqueryhtmlcss

Answer №1

you're getting warm:

check out iScroll.

I did run into a slight hiccup in my testing - had to nest the code within a list (ul) but that might have been a mistake on my end.

Answer №2

If you're searching for a solution, you can achieve it by simply utilizing the default behavior on IOS Safari (iPhone/iPad).

Just set a fixed height for the container div with overflow, like this:

<div id="container" style="height:400px;overflow:auto">
Your content
</div>

This will enable scrolling using 2 fingers on versions prior to IOS5 and single-finger scroll for IOS5 and later.

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

Vue.js does not display HTML properly within the vue-swal component

I'm currently working on integrating HTML content into a Sweet Alert popup using this code snippet Link: https://www.npmjs.com/package/vue-swal this.$swal({ title: '<i>Custom HTML</i>', html:`This is an <em> em ...

javascriptvue.jsvuejs2

Submitting values in URI through an HTML form

Hey there, I'm really in need of some assistance with this issue that's been driving me crazy... :) So, I'm working on a project using Symfony2 and AngularJS: <form class="navbar-form navbar-right" role="form" action="" method="post"> ...

htmlangularjsformssymfonyform-submit

Learn how to incorporate PHP7 code into your HTML file through the use of .htaccess configurations

I have a Linux server with PHP 7.* installed. I want to embed PHP code into HTML files, but currently it just renders the PHP code on the webpage. I've tried adding the following code to my .htaccess file, but it doesn't seem to be working: AddH ...

phphtml.htaccess

Is it possible to change the text of a scrollspy dropdown to a default text when it is not actively tracking any items?

I am new to Vue and currently implementing Bootstrap Vue Scrollspy (view example here). My sticky dropdown is tracking all referenced content and updates with the current section in view. You can check out my code sample here. Is there a way to set the d ...

javascriptvue.jsvuejs2

How can I hide a root layout component in specific nested routes within the app directory of Next.js?

Is there a way to prevent rootlayout from being wrapped around dashboardlayout? Explore the latest documentation for Next.js version v13: Take a look at my file structure: I considered using route groups, but that approach disabled wrapping in the contac ...

javascriptreactjsnext.js

Utilize AJAX in JavaScript file

I am encountering an issue with the following code: function inicioConsultar(){ $(function(){ $('#serviciosU').change(function(){ if ($('#serviciosU').val()!= "-1") { $.ajax({ url: "@Url. ...

javascriptjqueryhtmlajax

What is the best way to include the ID in a Vue.js Ajax request for posts?

Is there a way to pass an "id" obtained as data in vue js? The id is coming as "agnt.basic.actor". Considering the presence of multiple ids, how can I achieve this? <tr v-for="agnt in agentlist"> <td v-if="agnt.basic">{{agnt.basic.actor}}< ...

javascriptajaxvue.jsvue-router

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...

htmlcss

"Strategies for effectively utilizing the .find method to locate specific users within a database

I'm currently working on developing a User Authentication system, but I've hit a roadblock when it comes to verifying users. Specifically, I'm struggling with understanding how to iterate through all of my users in order to filter out their ...

javascriptnode.jsmongodbexpressauthentication

Struggling with implementing ng-repeat in AngularJS for displaying HTML content

I stumbled upon a post that covers pretty much what I'm trying to achieve: AngularJS - Is it possible to use ng-repeat to render HTML values? Currently, the code appears like this and displays correctly as text: <div ng-repeat="item in items.Item ...

javascripthtmlangularjs

Vue component architecture

Just started exploring Vue last night, so the answer might be obvious. I came across components with this layout: <template> <Slider v-model="value"/> </template> <script> import Slider from '@vueform/slider' ...

javascriptvue.jsvue-componentvuejs3

Take away the dropdown selection once the form has been submitted

Every day, a user fills out a form ten times. They choose an option from the dropdown menu, fill out the form, and submit it. I am looking for a solution to either remove the selected option once it's been submitted or mark it as complete by highlight ...

javascripthtmlajax

What is the best way to retrieve the scope of ng-repeat from another directive located on the same element as ng-repeat?

Is it possible to access a property from the ng-repeat scope in another directive within the same element as the ng-repeat directive? For instance, I would like to be able to use the child.class property in this scenario: <div ng-class="{{ child.class ...

javascriptangularjsangularjs-ng-repeat

Using Selenium to Perform Drag and Drop Operations on an SVG Object

I am attempting to drag a specific Webelement and drop it inside an SVG "container" that contains four elements, which are represented by polygons. Each polygon is labeled as g[1], g[2], and so on. Here is the HTML code of the container: <div class=&qu ...

javascriptseleniumselenium-webdrivercucumber

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

csshtmlheight

The reactivity of a Vue.js computed property diminishes when it is transmitted through an event handler

Within my main application, I've implemented a Modal component that receives content via an event whenever a modal needs to be displayed. The Modal content consists of a list with an associated action for each item, such as "select" or "remove": Vue. ...

javascriptvue.jsvuejs2vue-reactivity

iFrame initially loads the page and subsequently reloads it continuously in a separate tab

Encountering a strange issue with IE11 regarding a series of links: <a href="page1.html" target="iframe_name">Page #1</a> <a href="page2.html" target="iframe_name">Page #2</a> <a href="page3.html" target="iframe_name">Page #3 ...

htmlajaxiframeinternet-explorer-7quirks-mode

Can you please explain how to indicate a modification in a JSON object with Polymer, transferring information from Javascript, and subsequently displaying child elements?

Currently, I am creating a JSON file that contains a random assortment of X's and O's. My goal is to display these elements in a grid format using a custom Polymer element. Initially, everything works fine as I can see a new grid generated each t ...

javascriptjsonobjectpolymerrerender

What is the best way to handle errors generated by my jsdom.jqueryify callback function?

When running this code in node.js, the output is a stack trace of an error that occurs on line 9. Surprisingly, the error on line 7 seems to be 'absorbed' by Node. Even when wrapped in a try/catch statement, the detailed stack trace output is not ...

javascriptnode.jsjsdom

Using Node to parse XLSX files and generate JSON data

Hello, I am currently utilizing the js-xlsx package which can be found at this link. My inquiry is how to successfully parse an xlsx file with merges and convert it into JSON format. You can view what the excel sheet looks like here. Ultimately, the JSON o ...

javascriptjsonnode.jsexcel