关于IScroll.js的snap出现的问题

Question

关于IScroll.js的snap出现的问题

IScroll.js的snap出现的问题 版本IScroll.js v5.2.0
创建IScroll，配置中加上 snap ，startX:-200 想要实现第二页为首页，左右滚动切页的效果。
但在初次打开html页面，设置好的第二页首页上，横向x拖动时情况正常。但如果在当前页面不小心误操作纵向y拖动时，它就会特别离奇的从设置好的第二页首页(-200)自动返回到到第一页（0）的位置上。
请问如何解决

附上代码

 .box {
            position: relative;
            width: 200px;
            height: 300px;
            overflow: hidden;
            margin: 0 auto;
        }
        .Content {
            width: 1600px;
            height: 300px;
        }
        .Contentitem {
            width: 200px;
            height: 300px;
            box-sizing: border-box;
            border: 1px solid #000;
            float: left;
        }

let myiscroll = new IScroll('.box', {
    startX: -200,
    scrollX: true,
    snap: '.Contentitem',
})

 <div class="box">
        <div class="Content">
            <div class="Contentitem" style="background-color: #f3f4f3;">00</div>
            <div class="Contentitem">-200首页</div>
            <div class="Contentitem" style="background-color: #f3f4f3;">400</div>
            <div class="Contentitem">600</div>
            <div class="Contentitem" style="background-color: #f3f4f3;">800</div>
            <div class="Contentitem">1000</div>
            <div class="Contentitem" style="background-color: #f3f4f3;">1200</div>
            <div class="Contentitem">1400</div>

        </div>
    </div>

另外还遇到因设置了snap后，无法通过 ele.style.transform=translate(-200px)修改当前滚动元素的偏移（发现会被snap覆盖）

Answer 1

该回答引用ChatGPT

关于第一个问题，IScroll.js 在使用 snap 时，会自动调整滚动的位置，以保证每个滚动元素都完全显示在可视区域内，因此，当你在纵向滚动时，可能会导致当前元素自动滚动到原来的位置，即第一页的位置。

解决这个问题，你可以尝试在配置中加入 probeType: 3，启用 IScroll.js 的滚动事件监听模式，以便在滚动时获取当前滚动的位置，从而对其进行判断和调整。代码如下：

let myiscroll = new IScroll('.box', {
  startX: -200,
  scrollX: true,
  snap: '.Contentitem',
  probeType: 3, // 启用滚动事件监听模式
  onScroll: function() {
    // 获取当前滚动位置
    let currentX = this.x;
    if (currentX >= -100 && currentX < 100) {
      // 当前滚动到第一页
      this.scrollTo(-200, 0, 0);
    }
  }
});

以上代码中，probeType: 3 启用了滚动事件监听模式，而 onScroll 回调函数则会在滚动时被触发，用来处理当前滚动位置的调整。在这个例子中，我们在滚动到第一页时，将其位置调整到设置好的第二页首页位置（即 startX: -200）。

关于第二个问题，当使用 snap 时，IScroll.js 会覆盖手动设置的 transform 属性，因为它需要自己控制滚动位置以保证每个滚动元素都完全显示在可视区域内。如果你需要手动控制滚动位置，建议不要使用 snap，而是使用 scrollTo 方法来实现滚动，例如：

// 向左滚动 200 像素
myiscroll.scrollTo(-200, 0, 500); // 第三个参数为动画时间，单位为毫秒

通过 scrollTo 方法可以精确地控制滚动位置和动画时间，不会受到 snap 的限制。