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

Node.js - Error: Undefined:0 SyntaxEncountered an unexpected end of input syntax error

Exploring Node.js and Backbone.js for the first time. Using the book "Backbone Blueprints" but encountering issues with the provided code to set up the webserver. Node.js is installed and running fine. Here's the package.json code: { "name": "simp ...

javascriptjqueryjsonnode.jsbackbone.js

Update the jQuery Mobile components on the page by refreshing them after dynamically adding them using AJAX and PHP

I have developed a PHP script that dynamically renders three form elements for each entry in a database. The script generates HTML output similar to the following example: <!-- Entry 1 --> <div data-role="fieldcontain"> < ...

phpjquerycssajaxmobile

Align two images to the center while displaying them in individual rows

<div class="client-logo-wrapper"> <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a> <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contr ...

htmlcsssass

Updating the state value of a variable that utilizes a custom Hook: a step-by-step guide

After watching a video by Dan Abramov, I decided to optimize my component by creating a custom Hook called useFormInput. This hook handles the state and onChange functionality for all of my form input fields. Everything was working perfectly until I neede ...

javascriptreactjsstatereact-hooks

Modifying the color of an SVG in real-time and using it as a texture in Three.js

I have been attempting to develop a configurator using three.js, but I am currently stuck at the stage where I need to dynamically change the color of the product. My initial idea was to use an SVG as a texture, modify the fill property of the SVG, and eas ...

javascriptsvgthree.js

disabling a submit button

I am new to coding and need help disabling a button on document load. Can someone assist me with this? Here is my current code snippet: $(document).ready(function() { setTimeout("check_user()", 250); }); Your guidance is greatly appreciated! ...

javascriptjquery

Transforming hash tags into complete URLs with jQuery Mobile

Currently, I am utilizing the jQuery mobile plugin to enable smooth slide transitions between pages, which are functioning flawlessly! However, I have encountered an issue where the hashchange events within the jQuery mobile transitions are conflicting wit ...

jqueryajaxjquery-mobiletransition

Switching Languages in react-simple-keyboard: Explained

import React, { useRef, useState } from "react"; import Keyboard from "react-simple-keyboard"; import "react-simple-keyboard/build/css/index.css"; function App() { const [input, setInput] = useState(""); const [ ...

javascriptreactjsreact-simple-keyboard

AngularJS- Efficiently loading components asynchronously within the application

As I dive into developing my app, I've decided to use AngularJS as my front-end framework. However, my lack of experience with AngularJS has presented me with some challenges in understanding its concepts and logic. Below is a rough outline of the sc ...

javascriptangularjsnode.jsng-view

Tips on causing JavaScript execution to halt until an element has finished rendering

test.view.js timeDBox = new sap.ui.commons.DropdownBox({layoutData: new sap.ui.layout.GridData({linebreak: true}), change: function(oEvent){ oController.getKeyEqChart(); }, }), new sap ...

javascriptjqueryhtmlajaxsapui5

Finding the Absolute XPath of a Website Element

Using Javascript in the code below, I am retrieving the absolute XPath of a web element: public String getAbsoluteXPath(WebDriver driver) { return (String) driver.executeScript( "function absoluteXPath(element) {"+ "va ...

javahtmlseleniumxpath

Error Message "Alexa.create is not a valid function" encountered while using the Alexa HTML Web API on the Echo Show 10

Here is the HTML code for my custom Alexa Skill. <head> <script src="https://cdn.myalexaskills.com/latest/alexa-html.js"> </script> </head> <body> var alexaClient; Alexa.create({version: '1.0'}) .t ...

javascripthtmlalexa-skills-kit

codeigniter view is facing issues with ajax functionality

Working with CodeIgniter, I am attempting to send form data to a controller using AJAX. However, I encountered an issue where the content of $this->input->get_post("sku_qty") in the controller is NULL. Additionally, there seems to be an error in the ...

phpjqueryajaxcodeigniter

Customize Text Area's Font Based on Selected Option in Dropdown List

I'm currently working on an HTML file that includes a dropdown list and a text area. Here's the code snippet: <select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'> <option value = ' ...

javascripthtml

Is it recommended to create model classes in React components?

Within the realms of React, the Flux architecture is utilized. According to https://reactjs.org/docs/thinking-in-react.html, React operates with two distinct models - namely, the state and props. There are recommendations provided for model management in ...

javascriptreactjsclassreact-nativeflux

Rendering DataTable content seamlessly from a different webpage using JavaScript without sacrificing control

Is it possible to dynamically call HTML content from Page2.html into Page1.html by utilizing DataTables (https://datatables.net/)? Page1.html <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" c ...

javascriptajaxdynamicdatatable

Using jQuery to trigger alert only once variable has been updated

I have a question that may seem too basic, but I can't find the solution. How do I make sure that the variables are updated before triggering the alert? I've heard about using callbacks, but in this case, there are two functions and I'm not ...

javascriptjquery

Printing in Firefox is ineffective, but functions smoothly in alternative browsers

I'm currently working on customizing some content specifically for printing, so I've implemented a hook import { useState } from 'react' const usePrint = () => { const [isPrinting, setIsPrinting] = useState(false) const hand ...

javascriptreactjsfirefox

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

Attempting to merge the data from two separate API responses into a single array of objects

I have a current project in which I'm dealing with an object that has three separate arrays of objects. Here's a glimpse of the structure... [ Array 1:[ { key: value} ], Array 2:[ { key: value}, { key: value} ], Array ...

javascriptangularjsarrays