This answer quotes ChatGPT
On the first question, iscrol.js automatically adjusts the scroll position when using snap to ensure that each scroll element is fully visible. Therefore, when you scroll in portrait, you may cause the current element to scroll automatically to the original position, that is, the first page.
To solve this problem, you can try to add probeType: 3 in the configuration, enable IScroll.js scroll event listening mode, in order to obtain the current scroll position when scrolling, so as to judge and adjust it. The code is as follows:
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);
}
}
});
In the above code, probeType: 3 has the scroll event listening mode enabled, and the onScroll callback function is triggered during scrolling to handle the adjustment of the current scroll position. In this example, when we scroll to the first page, we adjust its position to the set location of the first page on the second page(that is, startX: -200).
Regarding the second question, IScroll.js overrides the manually set transform property when using snap because it needs to control the scroll position itself to ensure that each scroll element is fully visible. If you need to manually control the scroll position, it is recommended not to use snap, but to use the scrollTo method to implement the scroll, for example:
// 向左滚动 200 像素
myiscroll.scrollTo(-200, 0, 500); // 第三个参数为动画时间，单位为毫秒
The scrollTo method can precisely control the scroll position and animation time, and is not restricted by snap.
