Home > Enterprise >  How to make infinite Scrolling?
How to make infinite Scrolling?

Time：11-23

I am creating a Slider with horizontal Scrolling effect But I stuck at a point how Can I make the slider scroll infinitely Like in my code you can see After Item 6 it stops Scrolling and I have to scroll backward but I want it like after Item 6, Item 1 will come again Something like this https://durimel.io/nel Here you can see the scrolling is infinite?

So can anyone help in this?

let container = document.querySelector(".container")
let container1 = document.querySelector(".container1")

window.onscroll = ()=>{
  container.style.left = `${-window.scrollY}px` 
  container1.style.right = `${-window.scrollY}px` 
  
}
let currentpos = container.getBoundingClientRect().left
let currentpos1 = container1.getBoundingClientRect().left


let callDisort = () =>{
  let newPos = container.getBoundingClientRect().left;
  let newPos1 = container1.getBoundingClientRect().left;
  let diff = newPos - currentpos;
  let speed = diff * 0.50
  container.style.transform = `skewX(${speed}deg)`
  currentpos = newPos
  container1.style.transform = `skewX(${speed}deg)`
  currentpos = newPos

  requestAnimationFrame(callDisort)
}
console.log(currentpos)


callDisort()
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: arial;
}
html,body{
  height:3000px;
   overflow-X:hidden;
}

.container{
  position:fixed;
  display:flex;
  justify-content: space-between;
  top:30vh;
  width: 3000px;
  transition:transform 0.15s;
  will-change:transform;
  border:2px solid green;
 
}
.container1{
  position:fixed;
  display:flex;
  justify-content: space-evenly;
  top:45vh;
  width: 3000px;
  transition:transform 0.15s;
  will-change:transform;
  border:2px solid green;
}

.box{
  position:relative;

}
.box h2{
  font-size:4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div class="container">
    <div class="box one">
      <h2>Item 1</h2>
    </div>
    <div class="box two">
      <h2>Item 2</h2>
    </div>
    <div class="box three">
      <h2>Item 3</h2>
    </div>
    <div class="box four">
      <h2>Item 4</h2>
    </div>
    <div class="box five">
      <h2>Item 5</h2>
    </div>
    <div class="box six">
      <h2>Item 6</h2>
    </div>
  </div>

      <div class="container1">
    <div class="box one">
      <h2>Item 1</h2>
    </div>
    <div class="box two">
      <h2>Item 2</h2>
    </div>
    <div class="box three">
      <h2>Item 3</h2>
    </div>
    <div class="box four">
      <h2>Item 4</h2>
    </div>
    <div class="box five">
      <h2>Item 5</h2>
    </div>
    <div class="box six">
      <h2>Item 6</h2>
    </div>
  </div>
  


    
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The method the example (https://durimel.io/nel) uses differs and is not really infinite. It is limited to the max values the css properties left and transform: translate3d() support. But its enough for a normal use.

It changes the position of each box as soon as it is out of view depending on the direction and moving it behind the "last" or before the "first" using transform: translate3d() and left: ....

Overall here is version of the method i mentioned. I recommend testing it in on jsfiddle or run the snippet in "Full Page"-View because of the mouse-wheel-scrolling behavior from unscrollable iframe-childs and a scrollable parents can't be prevented.

Show code snippet

const eventHandler = (e) => {
  document.querySelectorAll(".boxes-container").forEach(container => {
    const cur =  container.dataset.cur || 0;
    container.dataset.before = container.dataset.cur;
    let moveByPixels = e.deltaY / 4;
    if (container.dataset.direction == "invert") {
      moveByPixels *= -1;
    }
    container.style.left = `${cur   -moveByPixels}px`;
    container.dataset.cur = cur   -moveByPixels;
  });
};

window.addEventListener("wheel", eventHandler);
window.addEventListener("mousewheel", eventHandler);

const observer = new IntersectionObserver((entries, opts) => {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
  document.querySelectorAll(".boxes-container").forEach(container => {
    const before = ( container.dataset.before || 0),
      current = ( container.dataset.cur || 0),
      diff = before - current,
      boxes = [...container.querySelectorAll(".box")],
      visible = [...container.querySelectorAll(".box.visible")],
      first = boxes.indexOf(visible[0]),
      last = boxes.indexOf(visible[visible.length - 1]),
      adjust = (by) => {
        container.dataset.cur =  container.dataset.cur   by;
        container.dataset.before =  container.dataset.before   by;
        container.style.left =  container.dataset.cur   'px';
      };
    if (diff >= 0) {
      if (first >= 1) { // move the first to the end
        boxes[0].parentNode.append(boxes[0]);
        adjust(boxes[0].clientWidth);
      }
    } else {
      if (last == 0 || first == 0) { // move the to first
        boxes[boxes.length - 1].parentNode.prepend(boxes[boxes.length - 1]);
        adjust(-boxes[boxes.length - 1].clientWidth);

      }
    }
  })
}, { // trigger on any percent value
  threshold: new Array(101).fill(0).map((n, i) =>  (i / 100).toFixed(2))
});
document.querySelectorAll(".box").forEach(el => observer.observe(el));
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Sans-Serif;
}

.boxes-container {
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  white-space: nowrap;
  min-width: -min-content;
}

.v30 {
  top: 30vh;
}

.v60 {
  top: 60vh;
}

.box {
  position: relative;
  border: 1px dotted purple;
  margin: 0 !important;
  padding: 0 50px;
}

.box h2 {
  font-size: 5rem;
}
<div class="boxes-container">
  <div class="box">
    <h2>0</h2>
  </div>
  <div class="box">
    <h2>1</h2>
  </div>
  <div class="box">
    <h2>2</h2>
  </div>
  <div class="box">
    <h2>3</h2>
  </div>
  <div class="box">
    <h2>4</h2>
  </div>
  <div class="box">
    <h2>5</h2>
  </div>
  <div class="box">
    <h2>6</h2>
  </div>
</div>

<div class="boxes-container v30" data-direction="invert">
  <div class="box">
    <h2>A</h2>
  </div>
  <div class="box">
    <h2>B</h2>
  </div>
  <div class="box">
    <h2>C</h2>
  </div>
  <div class="box">
    <h2>D</h2>
  </div>
  <div class="box">
    <h2>E</h2>
  </div>
  <div class="box">
    <h2>F</h2>
  </div>
  <div class="box">
    <h2>G</h2>
  </div>
</div>

<div class="boxes-container v60">
  <div class="box">
    <h2>0</h2>
  </div>
  <div class="box">
    <h2>1</h2>
  </div>
  <div class="box">
    <h2>2</h2>
  </div>
  <div class="box">
    <h2>3</h2>
  </div>
  <div class="box">
    <h2>4</h2>
  </div>
  <div class="box">
    <h2>5</h2>
  </div>
  <div class="box">
    <h2>6</h2>
  </div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

A few comments on this solution.

  1. If the container is set to display:flex; justify-content:space-around; then the space between the items will change as you scroll (the more items, the closer packed they are). Changing to justify-content:flex-start; with a fixed width for each .box delivers the best result.

  2. Adding a debounce fn greatly improved (and simplified) the job. At least, the console logs are underwhelming(!).

  3. If you scroll the scroll wheel very fast, you might hit the end of the carousel before it re-populates. To make that easier to see, change the delay from 50 to 500 (milliseconds).

  4. The debounce is saying, "only plunk more boxes into the container when 50ms has elapsed since the last scroll event. You might prefer a throttle function instead, where it will run at most one re-population every 50ms (or as you set the debounceDelay value).

  5. The HTML,Body height needs to be set to a very large number - in this demo it is now set to 30,000. The .container width should be auto, and it (the .container width) will increase every time new items are plonked into the container.

  6. Most important: the $ and $$ are not jQuery. They are pure vanilla javaScript shorthand for document.querySelector() and document.querySelectorAll()

  7. The demo is best viewed full page (link at top right of demo window).

Show code snippet

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
let kontainer = $(".container");
const boxes = $$('.box');
const debounceDelay = 50; //change to 100 for better performance

const updateCarousel = debounce(function(e){
  console.log(scrollY  ' // '  kontainer.getBoundingClientRect().right)
  const currKontainerWidth = kontainer.getBoundingClientRect().right;
  if ( currKontainerWidth - scrollY < 300 ){
    for (let i=0, j=boxes.length; j > i; i  ){
      kontainer.appendChild(boxes[i].cloneNode(true));
    }
  }
}, debounceDelay);

window.addEventListener('scroll', updateCarousel, false);

window.onscroll = () => {
  kontainer.style.left = `${-window.scrollY}px`;
}

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: arial;
}
html,body{
  height:30000px;
   overflow-X:hidden;
}

.container{
  position:fixed;
  display:flex;
  justify-content: flex-start;
  top:30vh;
  width: auto;
  transition:transform 0.15s;
  will-change:transform;
  border:2px solid green;
 
}

.box{
  position:relative;
  min-width:250px;

}
.box h2{
  font-size:4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div class="container">
    <div class="box one">
      <h2>Item 1</h2>
    </div>
    <div class="box two">
      <h2>Item 2</h2>
    </div>
    <div class="box three">
      <h2>Item 3</h2>
    </div>
    <div class="box four">
      <h2>Item 4</h2>
    </div>
    <div class="box five">
      <h2>Item 5</h2>
    </div>
    <div class="box six">
      <h2>Item 6</h2>
    </div>
  </div>

    
</body>
</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Best viewed "full page" (top right link after clicking Run Code Snippet)

Page link：https//www.codepudding.com/Enterprise/201123.html

Prev:How to get yii2 clicked radioList value in Jquery?
Next:How to put ajax array to coldfusion variable?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding