【移动端事件】swiper左右滑动时禁止页面上下滚动

最新推荐文章于 2024-01-12 10:02:56 发布

原创最新推荐文章于 2024-01-12 10:02:56 发布 · 7.5k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript文章同时被 3 个专栏收录

14 篇文章

订阅专栏

移动Web

2 篇文章

订阅专栏

用户体验

1 篇文章

订阅专栏

本文介绍了一种解决Swiper类插件与页面滚动冲突的方法，通过监听touchstart和touchmove事件并计算角度来判断是否阻止页面上下滚动，提供平滑的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

某些swiper类插件，左右滑动时会导致页面上下滚动，如果在touchmove事件中直接使用event.preventDefault()，就会彻底阻止触摸滑动，给用户的感受就是划不动。
以下是增加的fix code

    // 左右滑动时阻止页面上下滑动
    var touchElement = {};
    var $slides = $('.am-slider');
    if ($slides.length) {
        $slides.on('touchstart', function (e) {
           touchElement.startX = e.touches[0].clientX;
           touchElement.startY = e.touches[0].clientY;
        }).on('touchmove', function (e) {
            var deltaX = e.touches[0].clientX - touchElement.startX;
            var deltaY = e.touches[0].clientY - touchElement.startY;
            if (Math.abs(Math.asin(deltaY/deltaX)) <= 15/180*Math.PI && e.cancelable) {
                e.preventDefault();
            }
            // e.cancelable默认为false，即touchmove中不能强制执行e.preventDefault()，
            // 因此会报错Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted，
            // 所以这里要判断e.cancelable === true
            // （插件源码受影响也会报错，因此插件里这个地方也要同时修改）。
        });
    }