Implementing a two-column infinite scrolling feature using ISCroll

I am looking to incorporate multi-column infinite scrolling using IScroll infinite scrolling. I want the content of my HTML to appear as follows:

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

My goal is for it to display like this in my view:

|A B|
|C D|

How can I modify https://github.com/cubiq/iscroll/tree/master/demos/infinite to showcase elements in two columns? I have attempted setting display: inline-block, width: 45%, and changing the positioning to relative on each element, but so far have only achieved a layout similar to:

|A    |
|    B|
|C    |
|    D|

javascripthtmlcssinfinite-scrolliscroll

Answer №1

give this a shot....

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>iScroll demo: infinite scrolling</title>

    <script type="text/javascript" src="../../build/iscroll-infinite.js"></script>

    <script type="text/javascript">
        var myScroll;

        function loaded() {
            myScroll = new IScroll('#wrapper', {
                mouseWheel: true,
                infiniteElements: '#scroller .row',
                infiniteLimit: 2000,
                dataset: requestData,
                dataFiller: updateContent,
                cacheSize: 16
            });
        }

        function requestData(start, count) {
            setTimeout(function () {
                var data = [];
                if (start < 50) {
                    for (i = 0; i < count; i++) {
                        data[i] = '<div class="col1 col">Row ' + (start + i * 2) + '</div>';
                        data[i] += '<div class="col2 col">Row ' + (start + i * 2 + 1) + '</div>';
                    }
                }
                myScroll.updateCache(start, data);
            }, 500);
        }

        function updateContent(el, data) {
            if (data != undefined)
                el.innerHTML = data;
        }

        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, false);

    </script>

    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        html {
            -ms-touch-action: none;
        }

        body, ul, li {
            padding: 0;
            margin: 0;
            border: 0;
        }

        body {
            font-size: 12px;
            font-family: ubuntu, helvetica, arial;
            overflow: hidden; /* necessary to prevent page bounce */
        }

        #header {
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background: #CD235C;
            padding: 0;
            color: #eee;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }

        #footer {
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 48px;
            background: #444;
            padding: 0;
            border-top: 1px solid #444;
        }

        #wrapper {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 48px;
            left: 0;
            width: 100%;
            background: #ccc;
            overflow: hidden;
        }

        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }

        #scroller ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
            position: relative;
        }

        .row {
            width: 100%;
            height: 150px;
            position: absolute;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            padding: 0 10px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #fff;
            background-color: #fafafa;
            font-size: 16px;
        }

        .col1, .col2 {
            float: left;
            width: 50%;
            height: 100%;
            border: 1px solid gray;
        }

        .col1 {
            left: 0%;
        }

        .col2 {
            left: 50%;
        }

    </style>
</head>
<body onload="loaded()">
<div id="header">iScroll</div>

<div id="wrapper">
    <div id="scroller">
        <div class="row">
            <div class="col1 col">Row 1</div>
            <div class="col2 col">Row 2</div>
        </div>
        <div class="row">
            <div class="col1 col">Row 3</div>
            <div class="col2 col">Row 4</div>
        </div>
        <div class="row">
            <div class="col1 col">Row 5</div>
            <div class="col2 col">Row 6</div>
        </div>
        <div class="row">
            <div class="col1 col">Row 7</div>
            <div class="col2 col">Row 8</div>
        </div>

    </div>
</div>

<div id="footer"></div>

</body>
</html>

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

Discover how to access the DOM after AngularJS directive rendering is finished

Looking to create a unique scroll pane component using an AngularJS directive? Check out this jsfiddle example for a basic prototype. Here is the concept behind my custom scroll pane: Directice code snippet: myApp.directive('lpScrollPane', ...

javascriptwebwidgetcomponentsangularjs

What could be causing the state to not update as anticipated?

I am currently in the process of developing a TicTacToe game and have a requirement to maintain the current player in state under the name currentPlayer. The idea is that after one player makes a move, I need to update currentPlayer to represent the opposi ...

javascriptreactjstic-tac-toesetstate

What are the benefits of declaring variables with JSON in a JavaScript file instead of simply reading JSON data?

Lately, I've been delving into the world of leaflets and exploring various plugins. Some of the plugins I've come across (like Leaflet.markercluster) utilize JSON to map out points. However, instead of directly using the JSON stream or a JSON fi ...

javascriptjsonleafletgeojsonleaflet.markercluster

Unable to receive Ajax response

My current programming setup involves using a combination of JavaScript and PHP to implement an Ajax code. However, at this point in time, the outcome is showing up as undefined. To circumvent this issue, I have resorted to utilizing localStorage to trans ...

javascriptphpajax

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

htmlcss

What is the method for applying the action (hide) to every table cell that doesn't include a specific string in its ID?

I have a table with cells containing unique IDs such as "2012-01-01_841241" that include a date and a number. My goal is to filter the table to only display three specific numbers by sending a request and receiving those numbers. Is there a more efficien ...

javascriptjqueryuser-interface

How do I prevent a specific word from being removed in a contenteditable div using JavaScript?

Attempting to create a terminal-like experience in JS, I am looking to generate the word 'current source, current location' (e.g., admin@ubuntuTLS~$: ~/Desktop) at the beginning which cannot be removed. Also, I want to prevent the caret from bein ...

javascriptterminaltextareacontenteditablecaret

When you click on the button, the section will not be displayed

I'm facing an issue with my code. I have a set of five buttons and corresponding sections. When a button is clicked, the active and active-btn classes are supposed to be added to that button as well as the corresponding section element with the same i ...

javascripthtmlcsssass

Step-by-step guide on inserting an image directly into an HTML file without utilizing LinkedResource or CDO

Let's say we have a scenario: My objective is to put together an HTML file with an embedded image, similar to the structure below: <html> <head> </head> <body> <img src="?" /> </body> </html> The quest ...

c#html

The window.open() function is malfunctioning on Google Chrome

Within my vue.js application, I have encountered an issue when attempting to utilize window.open() to open a new tab. Strangely, whenever I use this method, the new tab opens briefly before immediately closing without loading any content. Surprisingly, win ...

javascriptvue.jswindow.open

Avoid triggering the onClick event on multiple submit buttons when the form data is deemed invalid by vee-validate

How can I ensure that the onClick event on a button is only called if certain input fields are valid, using vee-validate ValidationObserver? The validation should apply to individual buttons within a form, rather than the entire form itself, as there are m ...

javascriptvue.jsvalidationsubmit

I'm having trouble extracting data into my HTML file using the append function in Jquery. What could be causing this issue?

Hey there, I'm having some trouble extracting data from a URL to my HTML file using jQuery. Can anyone help out? I'm still new to this. Here's the code <html> <head> <title> My Program </title> <script src="ht ...

javascriptjqueryhtmljson

The error encountered is related to the MongooseServerSelectionError that occurs in

I have been working on setting up my first mongo-db application to connect to the server. However, I am encountering a specific error during this process: const express = require('express'); const mongoose = require('mongoose'); const ...

javascriptnode.jsmongodbnpmmongoose

moment.js conversions proving ineffective

My input field requires users to select a date and time. The local machine is either in GMT or BST depending on the time of year. For those unfamiliar with UK time changes: GMT (Greenwich Mean Time) is always equal to UTC BST (British Summer Time) is GM ...

javascripttimezonemomentjs

Combining and organizing Javascript files for efficient loading and reusable code functionality

I've been tasked with cleaning up a project that contains around 45-50 separate .js javascript files. I'm trying to figure out the most effective way to reduce their loading size. Should I combine all the files into one using npm or gulp? Or shou ...

javascriptnpmgulpbundle

"Learn how to use socket.io in conjunction with the express generator to create individual sockets for each unique link

I'm working on a typical express-generator app where I have some code in my controllers folder: router.get('/:id([A-Za-z0-9_]{5,25})', function(req, res, next) { res.render('my-page.html', { title: 'Messag ...

javascriptnode.jsexpresssocket.io

Animating with Jquery swipe motion

I am looking to make my brand image appear animated when the site is opened. I want it to swipe or move linearly from left to right and then return to its original position. I tried searching on Google for a solution but couldn't figure out how to mak ...

jquerycss

How to extract the complete URL from the API endpoint in nextjs

I'm curious if there is a way to fetch the complete URL of the current request within the API route (pages/api/myapi). The only response I have found that comes close to what I need is the req.headers.referer, but I am uncertain if this value will alw ...

javascriptreactjsnext.js

What occurs when a function component is passed as a state variable?

Can a function component be passed as a state variable? Is it possible for the code below to work correctly? I attempted it but encountered an error stating props.children isn't a function. Do you know if this approach can be successful? const App = ...

javascriptreactjs

Challenges with Scope in Using AJAX Calls within an Infowindow

Could it be a scope issue? Feel free to correct me if I'm mistaken. I've got a for loop that's placing markers on my map. Each marker has a different infowindow that loads content using ajax callbacks. This is a simplified version of the s ...

javascriptajaxgoogle-mapsgoogle-maps-api-3