如何解决在触摸事件侦听器中未执行scrollIntoView
我正在尝试制作一张垂直幻灯片,它可以在带有wheel事件的桌面上运行,但是scrollIntoView方法不会在触摸事件侦听器中执行。
这是代码
let startClientY,endClientY;
page.addEventListener("touchstart",(event) => {
startClientY = event.touches[0].pageY;
},false);
page.addEventListener("touchmove",(event) => {
endClientY = event.touches[0].pageY;
},false);
page.addEventListener("touchend",(event) => {
let diff = startClientY - endClientY;
if (diff < -35) {
if( i !== 0 ) {
slides[i - 1].scrollIntoView({
behavior: "smooth",block: "start"
});
i--;
console.log('scroll top'); // this code is executed as well
}
} else if (diff > 35) {
if( i < slides.length -1) {
slides[i + 1].scrollIntoView({
behavior: "smooth",block: "start"
});
i++;
console.log('scroll down'); // this code is executed
}
}
startClientY = undefined;
endClientY = undefined;
},false);
奇怪的是,控制台条件内的日志已执行,并且scrollIntoView方法在eventListeners之外起作用
我想念什么?
解决方法
问题来自触摸事件监听器中的scrollIntoView行为选项,我发现了另一种实现我想要的方法的方法。
let slideHeight = page.offsetHeight;
page.addEventListener("touchstart",function (event) {
startClientY = event.touches[0].pageY;
},{
capture: true,passive: true
});
page.addEventListener("touchmove",function (event) {
endClientY = event.touches[0].pageY;
},passive: true
});
page.addEventListener("touchend",(event) => {
let diff = startClientY - endClientY;
if (diff < -35) {
if (i !== 0) {
page.scrollBy(0,-slideHeight);
i--;
}
} else if (diff > 35) {
if (i < slides.length - 1) {
page.scrollBy(0,slideHeight);
i++;
}
}
startClientY = undefined;
endClientY = undefined;
},passive: true
});
其中页面变量是我的幻灯片 希望对您有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。