scrollIntoView 未在触摸事件侦听器中执行
scrollIntoView not executed in touch event listener
我正在尝试制作垂直幻灯片,它可以在桌面上使用滚轮事件运行,但 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);
奇怪的是conditions里面的console日志被执行,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;
}, {
capture: true,
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;
}, {
capture: true,
passive: true
});
页面变量是我的幻灯片
希望对您有所帮助!
添加touch-action:none;给你的 css
使用event.preventDefault()
阻止浏览器继续处理触摸事件。
page.addEventListener("touchstart", (event) => {
event.preventDefault();
......
}, false);
参考:https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
我正在尝试制作垂直幻灯片,它可以在桌面上使用滚轮事件运行,但 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);
奇怪的是conditions里面的console日志被执行,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;
}, {
capture: true,
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;
}, {
capture: true,
passive: true
});
页面变量是我的幻灯片 希望对您有所帮助!
添加touch-action:none;给你的 css
使用event.preventDefault()
阻止浏览器继续处理触摸事件。
page.addEventListener("touchstart", (event) => {
event.preventDefault();
......
}, false);
参考:https://developer.mozilla.org/en-US/docs/Web/API/Touch_events