Question

我尝试在项目列表上实现触摸事件的功能。问题是我不知道如何在到达列表的结尾（或开头）时停止touchmove。我不知道在我结束时停止向右滚动，但仍然允许向左滚动。

我正考虑在列表末尾添加pointer-events: none，但在此之后我无法向左滚动。

也许我应该创建不同的功能来向左或向右滚动？或者还有其他一些方法可以做到这一点。

非常感谢所有帮助。

＆＃13;

let container = document.querySelector('.container');

container.addEventListener('touchstart', (e) => handleTouchStart(e), false);
container.addEventListener('touchmove', (e) => handleTouchMove(e), false);
let xDiff = null
let pos = 0;

function handleTouchMove(evt) {

  if (!this.xDown) {
    return;
  }

  let xUp = evt.touches[0].clientX;
  let xDiff = xDown - xUp;


  if (Math.abs(xDiff)) {
    if (xDiff < 0) {
      prev();
    } else {
      next();
    }
  }

  /* reset values */
  xDown = null;
}

function handleTouchStart(evt) {
  xDown = evt.touches[0].clientX;
};

function next() {
  pos += 10
  container.style.marginLeft = pos + 'px'
}

＆＃13;

.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
}

.container {
  overflow: hidden;
  width: 300px;
  white-space: nowrap;
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

＆＃13;

Link

Answer 1

＆＃13;

/*Kindly use touchmove event and the value will be false see below the examples**


$('.list .items').bind('touchmove', false);

＆＃13;

如何在达到某个位置时停止触摸事件？

1 个答案: