jQuery iScroll: The scrolling feature does not stop when reaching the end of the content

Recently, I've been utilizing iScroll for horizontal scrolling on a list. At first, everything seems to be working fine, but as I scroll towards the end (right to left), the content reaches its conclusion yet the scrolling continues beyond that. I'm at a loss as to what I might be overlooking.

If you'd like to take a look at my code, here's the link to the Fiddle: http://jsfiddle.net/mantrig/wvypmw0g/1/

Below, you can find the function initialization:

function loaded () {
 myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true,    scrollY: false, preventDefault: false });
}

Answer №1

  #scroller {
      position: absolute;
      z-index: 1;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      width: 2400px;
      ...
}

Ensure the width is set to 2400px;

This demonstration functions properly because #scroller has a width of 5000px with li elements of size 50*100px.

This is not an inline style and was not written by iScroll (JavaScript).

You must manually adjust the width of your #scroller element;

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

Troubleshooting: Why is $watch failing to track changes on factory variables in Angular

I have created a factory named SharedService as shown below: angular.module('Fms').factory('SharedService', function() { var userdetails=false; return userdetails; }) Below controllers utilize this factory: angular.mod ...

When submitting the form, a new browser tab opens displaying a blank PHP script

Currently revamping my website using a template and editing the content with notepad++. Struggling to display a success message on the contact me page after form submission. The issue arises when I submit information in the text boxes and click submit, it ...

Adjusting the OrbitControl target in a React environment

I attempted to create a model using react-three-fiber and react-drei, but the OrbitControl target setting is causing it to appear too high. import React, { useRef, useState, Suspense, useEffect } from 'react' import { Canvas, useFrame, useLoader, ...

Performing a PHP Curl request and an ajax query to an ASP.NET page

I am attempting to send an ajax query to an ASP.NET page. Here is the algorithm I am following: 1. There is a form on my webpage; 2. When the user fills in all the fields, they click the submit button; 3. Upon clicking the submit button, JavaScript sends ...

Exposing the secrets of the Ajax module

Here is the code snippet I am working with: my.data = function () { var getAuth = function (userName, password) { var model = JSON.stringify({ "UserName": userName, "Password": password }); var result; $.ajax({ url: m ...

cancel the ajax request during an event

$(document).ready(function(){ $(".Personalized").click(function(){ if($("#divPersonalized").is(':visible')){ $('#triangle-personalized').hide(); $("#divPersonalized").hide(); } else if($('#loading_ ...

Troubleshooting Issue with Formidable Not Working with Multer

Attempting to develop a webpage that enables users to upload a file to a designated folder while specifying a number in an input field. Currently, I am navigating through the Multer library despite typically using body-parser. Referencing both my app.js an ...

How to validate a jQuery form without displaying any errors?

Is there a way to validate an input in ASP.NET MVC 3 using jQuery without displaying the error messages next to the input field? I have attempted: $("#myForm").validate().element("#myInput1"); // only displays the error message for myInput1 $('#myF ...

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

How can I locate a single hidden field within a div containing multiple fields?

Within one div, I have three hidden fields. How can I access and retrieve just one of these hidden fields when referencing this specific div? ...

Guide on transforming a NaN value to 0 within an app.post function in a .js file

When I try to convert the value of question1 from NaN to 0 using parseInt in the code below, it doesn't seem to work. How can I properly convert it? app.post('/auth/total',function(req,res){ console.log(req.body); const { question1, ...

React Object Array Item State management

After spending a considerable amount of time on this task, I have been trying to achieve the functionality of changing a checked value upon checkbox click. Here is how my initial state is set up: const [todoList, setTodoList] = useState({ foundation: ...

Troubleshooting issues with error handling functionality in a jQuery Ajax call are not being resolved

Utilizing jQuery and Ajax, I have successfully passed data to a PHP / MySQLi page. However, I am struggling to implement proper error handling. Specifically, I want to notify the user of a potential duplicate record if the data being sent already exists in ...

Display a specific user's div

Upon clicking the link below <a class="end" href="#">End</a> The code will execute, removing a user from a table and displaying a hidden div. The first user in an array is removed, triggering an email to the second user. $("a.end").click(fun ...

Resolving TypeError: matchesSelector method is not recognized within React component

I am currently integrating masonry-layout from the official website to create a masonry grid within my component. However, I encountered an issue where clicking on a rendered element triggers the error message TypeError: matchesSelector is not a function. ...

Error: AJAX response shows as NaN, indicating that the requested resource was not found

Attempting to create a search engine using AJAX. When typing in the search box, nothing happens. After inspecting the element and opening the console, an error message is displayed: script.js:19 GET http://localhost/var/www/html/pendaftaran-siswa/NaN 404 ( ...

How can I locate a div element using multiple class names?

<div class="value test" /> I am trying to locate this specific element on the web page which has two classes assigned to it. Since className does not accept space-separated values, I am exploring alternative ways to achieve this. Any suggestions? ...

The SELECT statement fails to fetch the most recent data from the database following an INSERT operation

When I make an AJAX request to the same page, my success function in PHP inserts a new record into a table called "some_table" in a MySQL database. Following that, I use jQuery to select data from this table and display it on the page. However, all old rec ...

Utilize separate production environments for each client on the NodeJS server to ensure seamless operation and

After conducting extensive research, I have been unable to find a solution to my current problem. I am operating a Node server with multiple environments (dev, test, demo, prod). The server is deployed on a Linux server in the production environment via a ...

Embed JavaScript locally within an iframe HTML

When attempting to add HTML code within an iframe to showcase data, everything works as expected. However, the issue arises when trying to include any JavaScript within the iframe, as it doesn't seem to be recognized locally. Below is the example cod ...