How to prevent click while scrolling horizontally

Question

I am using cards list with links and it is scrollable horizontally using mouse as well as arrows. I Want to prevent clicking ( tags) while scrolling/dragging items left or right. But clicking should work if i am not dragging items.

Here is what I am using in Javascript. Code

var instance = $(".hs__wrapper");
$.each( instance, function(key, value)
{
    var arrows = $(instance[key]).find(".arrow"),
      prevArrow = arrows.filter('.arrow-prev'),
      nextArrow = arrows.filter('.arrow-next'),
      box = $(instance[key]).find(".hs"), 
      x = 0,
      mx = 0,
      maxScrollWidth = box[0].scrollWidth - (box[0].clientWidth / 2) - (box.width() / 2);

      $(arrows).on('click', function() {
          
        if ($(this).hasClass("arrow-next")) {
          x = ((box.width() / 2)) + box.scrollLeft() - 10;
          box.animate({
            scrollLeft: x,
          })
        } else {
          x = ((box.width() / 2)) - box.scrollLeft() -10;
          box.animate({
            scrollLeft: -x,
          })
        }
          
      });
    
  $(box).on({
    mousemove: function(e) {
      var mx2 = e.pageX - this.offsetLeft;
      if(mx) this.scrollLeft = this.sx + mx - mx2;
    },
    mousedown: function(e) {
      this.sx = this.scrollLeft;
      mx = e.pageX - this.offsetLeft;
    },
    scroll: function() {
      toggleArrows();
    }
  });

  $(document).on("mouseup", function(){
    mx = 0;
  });
  
  function toggleArrows() {
    if(box.scrollLeft() > maxScrollWidth - 10) {
        // disable next button when right end has reached 
        nextArrow.addClass('disabled');
      } else if(box.scrollLeft() < 10) {
        // disable prev button when left end has reached 
        prevArrow.addClass('disabled')
      } else{
        // both are enabled
        nextArrow.removeClass('disabled');
        prevArrow.removeClass('disabled');
      }
  }

});

score 1 · Accepted Answer · answered Jun 21 '21 at 06:51

Try adding a click event handler to the links which prevents default browser behaviour while scrolling. Then, remove the event handler, detecting when scrolling stops using e.g. this method.

var instance = $(".hs__wrapper");
$.each( instance, function(key, value)
{
    var arrows = $(instance[key]).find(".arrow"),
      prevArrow = arrows.filter('.arrow-prev'),
      nextArrow = arrows.filter('.arrow-next'),
      box = $(instance[key]).find(".hs"), 
      x = 0,
      mx = 0,
      maxScrollWidth = box[0].scrollWidth - (box[0].clientWidth / 2) - (box.width() / 2);

      $(arrows).on('click', function() {
          
        if ($(this).hasClass("arrow-next")) {
          x = ((box.width() / 2)) + box.scrollLeft() - 10;
          box.animate({
            scrollLeft: x,
          })
        } else {
          x = ((box.width() / 2)) - box.scrollLeft() -10;
          box.animate({
            scrollLeft: -x,
          })
        }
          
      });
    
  $(box).on({
    mousemove: function(e) {
      var mx2 = e.pageX - this.offsetLeft;
      if(mx) this.scrollLeft = this.sx + mx - mx2;
    },
    mousedown: function(e) {
      this.sx = this.scrollLeft;
      mx = e.pageX - this.offsetLeft;
    },
    scroll: function() {
      clearTimeout($.data(this, 'scrollTimer'));
      $.data(this, 'scrollTimer', setTimeout(function() {
         $(box).find('a').off('click');
      }, 250));

      toggleArrows();
      $(box).find('a').on('click', function(e) {
         e.preventDefault();
      });
    }
  });

  $(document).on("mouseup", function(){
    mx = 0;
  });
  
  function toggleArrows() {
    if(box.scrollLeft() > maxScrollWidth - 10) {
        // disable next button when right end has reached 
        nextArrow.addClass('disabled');
      } else if(box.scrollLeft() < 10) {
        // disable prev button when left end has reached 
        prevArrow.addClass('disabled')
      } else{
        // both are enabled
        nextArrow.removeClass('disabled');
        prevArrow.removeClass('disabled');
      }
  }

});

@sbgib can you please add some modifications as: if the list of items shown is less (when no overflow, no scroll) then the arrows should be hidden. Also, if the the list of items is at the initial position, the previous arrow should be hidden. — Anonymous Girl, Jun 21 '21 at 07:31
@AnkitJaiSwal I'm not sure what you mean at the moment. If you can ask a question, show your code and show what you've tried so far to solve this, then I'll try and help. — sbgib, Jun 22 '21 at 06:39
@RiyaSingh about the PWA install button? It might be best to simply use CSS to prevent any CLS, as you don't know if the button should be shown until `beforeinstallprompt` runs. — sbgib, Jun 22 '21 at 06:43

How to prevent click while scrolling horizontally

1 Answers1