Question 303277 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to delay javascript wheel event

I have made a slider, I’m trying to make a scroll-to-slide function with pure JS, But I am not sure how to set a delay function scroll in each slide(set a delay time each time the user scrolls). I don’t know how to set the delay function in the javascript wheel event, I’m not looking with js scroll function, have any possibility with wheel event?

let sTop = document.querySelector(".maze");
sTop.addEventListener('wheel', (e) => {
  e.stopPropagation()
  let delta = e.deltaY
  if(delta == -100){
    leftSl();
  } else if(delta == 100) {
    nextSl();
  }
});
Tags:

3

Answers


  2. 0

    In this case I think you should have two different function for right and left slide.
    So you can make some changes in your code and work around.

    let sTop = document.querySelector(".maze");
let isScrolling = false;

sTop.addEventListener('wheel', (e) => {
  e.stopPropagation();
  
  if (isScrolling) {
    return; // Do nothing if a scroll in progress
  }

  let delta = e.deltaY;
  if (delta === -100) {
    isScrolling = true;
    leftSl();
  } else if (delta === 100) {
    isScrolling = true;
    nextSl();
  }

  setTimeout(() => {
    isScrolling = false;
  }, 1000);
});

function leftSl() {
  console.log("Left slide");
}

function nextSl() {
  console.log("Next slide");
}
    Login or Signup to reply.
  3. 0

    I have prepared two answers for you:

    1. To achieve a delay function in your scroll-to-slide functionality, you can use a combination of ‘setTimeout‘ and a variable to track whether the scroll event has been
      I feel that the code should be modified as follows

      let sTop = document.querySelector(".maze");
let isScrolling = false;



   sTop.addEventListener('wheel', (e) => {
      e.stopPropagation();

  if (!isScrolling) {
    isScrolling = true;

    let delta = e.deltaY;
    if (delta === -100) {
      leftSl();
    } else if (delta === 100) {
      nextSl();
    }

    setTimeout(() => {
      isScrolling = false;
    }, 1000); // Set your desired delay time in milliseconds
      }
     });

    function leftSl() {
       // Your left slide logic here
    }

     function nextSl() {
       // Your next slide logic here
    }

    2. I will write you a more complete model

    Below is a simple example of HTML and CSS code for a slider with left and next navigation buttons, and scroll functionality using pure JavaScript:

    HTML :

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Slider</title>
  <style>
     .slider {
      width: 300px;
      overflow: hidden;
      position: relative;
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      min-width: 100%;
      box-sizing: border-box;
    }

    .controls {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }

    .control {
      cursor: pointer;
      padding: 10px;
      background-color: #333;
      color: #fff;
      border: none;
    }

    img {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://images.unsplash.com/photo-1682685794690-dea7c8847a50?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
    <div class="slide"><img src="https://plus.unsplash.com/premium_photo-1665929001882-2aa45f561d7a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1682685794690-dea7c8847a50?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
    <!-- Add more slides as needed -->
  </div>
  <div class="controls">
    <button class="control" onclick="leftSl()">Left</button>
    <button class="control" onclick="nextSl()">Next</button>
  </div>
  <div class="controls">
    <button class="control" onclick="leftSl()">Left</button>
    <button class="control" onclick="nextSl()">Next</button>
  </div>
</div>



</body>
</html>

    JS :

    <script>
  let currentIndex = 0;
  let isScrolling = false;

  document.querySelector('.slider').addEventListener('wheel', (e) => {
    e.preventDefault();
    
    if (!isScrolling) {
      isScrolling = true;

      const direction = Math.sign(e.deltaY);
      if (direction === -1) {
        leftSl();
      } else if (direction === 1) {
        nextSl();
      }

      setTimeout(() => {
        isScrolling = false;
      }, 1000); // Set your desired delay time in milliseconds
    }
  });

  function leftSl() {
    currentIndex = (currentIndex - 1 + getSlideCount()) % getSlideCount();
    updateSlider();
  }

  function nextSl() {
    currentIndex = (currentIndex + 1) % getSlideCount();
    updateSlider();
  }

  function updateSlider() {
    const slideWidth = document.querySelector('.slide').clientWidth;
    const newTransformValue = -currentIndex * slideWidth;
    document.querySelector('.slides').style.transform = `translateX(${newTransformValue}px)`;
  }

  function getSlideCount() {
    return document.querySelectorAll('.slide').length;
  }
</script>

    I hope I have helped.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search