javascript - 鼠标&触摸水平div滑动

Question

我正在尝试为我的网站创建一个功能，允许用户使用 mousemove 和 touchmove 事件水平滚动 div 内容(类似于 Apple AppStore any app Screenshots section )。我通过为第一个 child 设置负的 margin-left 属性来做到这一点。一切正常，除了当移动设备上的用户触摸屏幕或在桌面上将光标移动到父 div 时，它的内容不会从当前位置滚动，而是“跳跃”。我尝试通过将当前的 margin-left 值添加到新的 pageX 值来做到这一点，但它不起作用。我做错了什么？或者也许不可能以这种方式实现此功能？

JS/Babel 代码:

class Collage {
  constructor(selector) {
    this.selector = $(selector);
    this.children = this.selector.children(':first-child');
    this.selector.on('mousemove touchmove', this.onMove.bind(this));
  }

  onMove(event) {
    const marginLeft = parseFloat(this.children.css('margin-left'));
    let mouseX = event.pageX || -event.touches[0].pageX || -event.changedTouches[0].pageX;

    const margin = calculateMargin(mouseX, 1);
    this.children.css('margin-left', margin);

    function calculateMargin(value, speed) {
      let val = -value*speed;
      return val <= 0 ? val : 0;
    }
  }
}

SCSS 代码:

.collage {
  overflow: hidden;
  max-height: 300px;

  white-space: nowrap;

  font-size: 0;

  img {
    display: inline-block;
    &:first-of-type {
      margin-left: -20%;
    }
  }
}

我的fiddle

预先感谢您的回答。

Answer 1

通过在图像周围创建第二个包装元素，您可以在不使用 JavaScript 的情况下获得所需的内容吗？

<div class="collage">
  <div class="wrapper">
    <img /> ....
 </div>
</div>

然后是CSS

.collage {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
  position: relative;
}
.wrapper {
   width: 10000px; 
  /* set width to something large 
     or set with Javascript to the calculated width of your images */
}