关于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覆盖）
该回答引用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 的限制。
该回答引用GPTᴼᴾᴱᴺᴬᴵ
这个问题可能是由于 iScroll 默认启用了滚动条的交互模式导致的。在用户在页面上垂直拖动时，iScroll 会误认为用户是在尝试滚动页面，从而自动触发一个回到顶部的操作。
为了解决这个问题，你可以尝试在 iScroll 的配置中添加一个 disableMouse 选项来禁用鼠标交互模式，只保留触摸交互模式，从而避免出现不必要的回到顶部操作。具体做法如下：
let myiscroll = new IScroll('.box', {
startX: -200,
scrollX: true,
snap: '.Contentitem',
disableMouse: true // 禁用鼠标交互模式
})
另外，你也可以尝试使用 iScroll 的 preventDefaultException 选项来指定一个元素或选择器，以避免在这些元素上的垂直滚动操作被 iScroll 截获。具体做法如下：
let myiscroll = new IScroll('.box', {
startX: -200,
scrollX: true,
snap: '.Contentitem',
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } // 指定文本框、按钮等元素不被截获
})
希望这些方法能够帮助你解决问题。