Thiết kế website giá rẻ

Question

I’m working on implementing an infinite scroll effect for a series of images on my webpage, but I’m encountering some issues with the scrolling behaviour. The goal is to achieve a seamless, vertical, smooth, and continuous scroll without noticeable glitches or interruptions.

Here’s a snippet of my current code:

It’s currently glitching slightly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seamless Infinite Scroll</title>
  <style>
    #uniqueImageScrollContainer {
      height: 650px;
      overflow: hidden;
      position: relative;
      padding: 10px;
    }

    .uniqueImageClass {
      width: 100%;
      height: auto;
      display: block;
      margin-bottom: 20px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }

    @media (max-width: 767px) {
      #uniqueImageScrollContainer {
        height: 350px;
      }
    }
  </style>
</head>
<body>
  <div id="uniqueImageScrollContainer">
    <img
      class="uniqueImageClass"
      src="https://clickrabbit.co/wp-content/uploads/2024/08/Mobile-Design-1-scaled.webp"
      alt="Clickrabbit Client 1"
    />
    <img
      class="uniqueImageClass"
      src="https://clickrabbit.co/wp-content/uploads/2024/08/Mobile-Design-4-scaled.webp"
      alt="Clickrabbit Client 2"
    />

    <img
      class="uniqueImageClass"
      src="https://clickrabbit.co/wp-content/uploads/2024/08/Mobile-Design-1-scaled.webp"
      alt="Clickrabbit Client 1"
    />
    <img
      class="uniqueImageClass"
      src="https://clickrabbit.co/wp-content/uploads/2024/08/Mobile-Design-4-scaled.webp"
      alt="Clickrabbit Client 2"
    />
  </div>

  <script>
    function initSmoothScroll() {
      const container = document.getElementById("uniqueImageScrollContainer");
      const scrollSpeed = 1.5; 
      let scrollPosition = 0;

      function scroll() {
        scrollPosition += scrollSpeed;
        container.scrollTop = scrollPosition;


        if (scrollPosition >= container.scrollHeight / 2) {
          scrollPosition = 0; 
        }

        requestAnimationFrame(scroll);
      }

      scroll();
    }

    window.addEventListener("load", initSmoothScroll);
  </script>
</body>
</html>

I have also tried a different approach as seen below and this seems to work much better. However, on my laptop it renders all the images but on mobile it doesn’t.

Any help would be much appreciated.

The site link is https://clickrabbit.co/home, I’m currently utilising the snippet below.

<div id="uniqueImageScrollContainer">
      <img
        class="uniqueImageClass"
        src="https://clickrabbit.co/wp-content/uploads/2024/08/Mobile-Design-1-scaled.webp" alt="Image 1"
      />
      <img
        class="uniqueImageClass"
        src="https://clickrabbit.co/wp-content/uploads/2024/08/Mobile-Design-4-scaled.webp"
        alt="Image 2"
      />
    </div>

    <style>
      #uniqueImageScrollContainer {
        height: 650px;
        overflow: hidden;
        position: relative;
         padding: 10px;
      }

      .uniqueImageClass {
        width: 100%;
        position: relative;
        display: block;
        
      }
      #uniqueImageScrollContainer img {
    margin-bottom: 20px;
    box-shadow: 05px 05px 10px rgba(0, 0, 0, 0.1);
    border-radius:10px;
}

    </style>

    <script>
      function initInfiniteScroll() {
  const container = document.getElementById("uniqueImageScrollContainer");
  const images = Array.from(container.children);
  const imageSources = images.map((img) => img.src);
  let scrollSpeed = 2;
  let accumulatedScroll = 0;
  let isHovering = false;

  container.addEventListener("mouseenter", () => {
    isHovering = true;
  });

  container.addEventListener("mouseleave", () => {
    isHovering = false;
  });

  function scroll() {
    if (!isHovering) {
      accumulatedScroll += scrollSpeed;

      if (accumulatedScroll >= 1) {
        const scrollAmount = Math.floor(accumulatedScroll);
        container.scrollTop += scrollAmount;
        accumulatedScroll -= scrollAmount;
      }
    }

    if (
      container.scrollTop + container.clientHeight >
      container.scrollHeight - 100
    ) {
      imageSources.forEach((src) => {
        const newImg = new Image();
        newImg.src = src;
        newImg.className = "uniqueImageClass";

        newImg.onload = () => {
          container.appendChild(newImg);  
        };

        newImg.onerror = () => {
          console.error("Image failed to load:", src);
        };
      });
    }

    while (
      container.firstChild &&
      container.scrollTop >= container.firstChild.offsetHeight
    ) {
      container.removeChild(container.firstChild);
    }

    requestAnimationFrame(scroll);
  }

  scroll();
}

window.addEventListener("load", initInfiniteScroll);
    </script>

Thiết kế website giá rẻ

Danh mục

Issues with Glitchy Infinite Scroll Implementation – Seeking Guidance