js的touch事件

Question

使用了touch相关事件，但是在滑动的过程中会触发浏览器的手势（前进，后退，缩放等）,于是乎就在touchmove中对浏览器默认事件进行了禁用，但是衍生出一个问题就是我页面中所有的滚动条都无法使用了，于是没办法只能通过代码在touchmove事件中来修改dom的scorllTop或scrollLeft值，但是又发现一个问题就是修改scrollLeft值没太多问题，但是修改scorllTop的时候会出现卡顿或者赋值不生效的情况，上述问题怎么解决呢

Answer 1

回复不易，麻烦关注下博主，后面还有问题直接私信我，谢谢！！！

问题的根本原因可能与浏览器的滚动行为和 touchmove 事件有关。在处理 touchmove 事件时，你禁用了浏览器默认行为，这导致浏览器不再处理滚动。因此，你需要手动模拟滚动的效果。

为了解决这个问题，你可以尝试以下方法：

使用 CSS 属性 overflow: hidden： 在处理 touchmove 事件期间，将页面的 overflow 样式设置为 hidden，以防止浏览器滚动。处理完 touchmove 事件后，再将 overflow 恢复到原来的值。

document.body.style.overflow = 'hidden';
// 处理 touchmove 事件
document.body.style.overflow = 'auto'; // 或 'scroll'，恢复原来的 overflow 值

使用 passive 选项： 在 addEventListener 中使用 { passive: false } 选项，以便在处理 touchmove 事件时仍能阻止浏览器默认滚动行为

document.addEventListener('touchmove', handleTouchMove, { passive: false });

模拟滚动效果： 如果需要在 touchmove 事件中手动模拟滚动效果，确保你的代码是高效的。使用 requestAnimationFrame 来在下一帧更新滚动位置，以提高性能。

let startY;

document.addEventListener('touchstart', (e) => {
    startY = e.touches[0].clientY;
});

document.addEventListener('touchmove', (e) => {
    const deltaY = e.touches[0].clientY - startY;
    // 模拟滚动效果
    window.scrollTo({
        top: window.scrollY - deltaY,
        behavior: 'auto' // 或 'smooth'，根据需要选择
    });
    startY = e.touches[0].clientY;
    e.preventDefault(); // 阻止默认滚动
}, { passive: false });

事件委托： 考虑使用事件委托来减少事件处理器的数量。只有在真正需要处理 touchmove 事件时才添加事件处理器，以减少性能开销。

避免频繁触发滚动： 如果你在 touchmove 中频繁触发滚动，可能导致性能问题。确保只在必要的情况下触发滚动，并尽量避免在滚动过程中频繁修改 DOM