how to use mobile touchmove event

Question

window.addEventListener("wheel", function(e){
    e.preventDefault();
  },{passive : false});

  var mHtml = $("html");
  var page = 1;

  mHtml.animate({scrollTop : 0},10);

  $(window).on("wheel", function(e) {
      if(mHtml.is(":animated")) return;
      if(e.originalEvent.deltaY > 0) {
          if(page == 4) return;
          page++;
      } else if(e.originalEvent.deltaY < 0) {
          if(page == 1) return;
          page--;
      }
      var posTop =(page-1) * $(window).height();
      mHtml.animate({scrollTop : posTop});
  })
  
window.addEventListener("touchmove", function(e){
    e.preventDefault();
  },{passive : false});

  var mHtml = $("html");
  var page = 1;

  mHtml.animate({scrollTop : 0},10);

  $(window).on("touchmove", function(e) {
      if(mHtml.is(":animated")) return;
      if(e.originalEvent.deltaY > 0) {
          if(page == 4) return;
          page++;
      } else if(e.originalEvent.deltaY < 0) {
          if(page == 1) return;
          page--;
      }
      var posTop =(page-1) * $(window).height();
      mHtml.animate({scrollTop : posTop});
  })

this is my code. code that causes the section to go down when scrolling. so we put a touchmove event so that it can work on mobile. but not working touchmove event. how to fix it?

Answer 1

The issue here is that the touchmove event does not have a deltaY property like the wheel event. For touch events, you need to calculate the direction of the move by comparing the starting and ending touch positions. Here's how you can modify your code to handle touch events correctly:

Store Initial Touch Position:

First, store the initial touch position on touchstart. Calculate Movement on touchmove:

Then, on touchmove, compare the current touch position with the initial position to determine the scrolling direction. Here's a modified version of your code:

window.addEventListener("wheel", function(e){
    e.preventDefault();
}, {passive: false});

var mHtml = $("html");
var page = 1;

mHtml.animate({scrollTop: 0}, 10);

$(window).on("wheel", function(e) {
    if(mHtml.is(":animated")) return;
    if(e.originalEvent.deltaY > 0) {
        if(page === 4) return;
        page++;
    } else if(e.originalEvent.deltaY < 0) {
        if(page === 1) return;
        page--;
    }
    var posTop = (page - 1) * $(window).height();
    mHtml.animate({scrollTop: posTop});
});

// Variables to store touch start position
let touchStartY = 0;
let touchEndY = 0;

window.addEventListener("touchstart", function(e) {
    touchStartY = e.touches[0].clientY;
}, {passive: false});

window.addEventListener("touchmove", function(e) {
    e.preventDefault();
    touchEndY = e.changedTouches[0].clientY;
}, {passive: false});

$(window).on("touchend", function() {
    if(mHtml.is(":animated")) return;

    // Determine the direction of the swipe
    if (touchEndY < touchStartY) {
        // Swiped up
        if(page === 4) return;
        page++;
    } else if (touchEndY > touchStartY) {
        // Swiped down
        if(page === 1) return;
        page--;
    }
    var posTop = (page - 1) * $(window).height();
    mHtml.animate({scrollTop: posTop});
});

This code uses touchstart to record the initial position of a touch and touchend to determine the end position and the direction of the touch movement (up or down). Based on this, it increments or decrements the page number. The touchmove event is still used to prevent the default scroll behavior.

Remember, touch events behave differently than mouse events, and different devices may have varying sensitivities to touch movements. Test this solution across different devices to ensure it works as expected.