javascript - 如何在水平滚动时防止单击

Question

我正在使用带有链接的卡片列表，它可以使用鼠标和箭头水平滚动。我想在向左或向右滚动/拖动项目时防止单击（标签）。但是，如果我不拖动项目，单击应该可以工作。

这是我在 Javascript 中使用的内容。 代码

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');
      }
  }

});

标签： javascriptjqueryscrollsliderscrollbar

Answer 1

尝试向链接添加单击事件处理程序，以防止滚动时的默认浏览器行为。然后，删除事件处理程序，使用例如此方法检测滚动何时停止。

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');
      }
  }

});