Jquery Touch Swipe插件实现Div内垂直滚动问题求助

嘿，我明白你现在遇到的麻烦了——用jQuery Touch Swipe做了移动端滑动功能，其他都正常，但垂直滚动时整个页面跟着动，而不是你想要的那个目标div内部滚动对吧？其实问题出在allowPageScroll的默认行为上，它是针对整个文档的，我们得换个思路来处理，下面给你具体的解决方案：

1. 先锁定插件的绑定目标 #

首先要确保你是给需要滚动的目标div而不是全局文档/body绑定swipe事件，同时先禁用allowPageScroll避免全局滚动干扰：

$("#your-target-div").swipe({
  swipe: function(event, direction) {
    // 后续添加滚动逻辑
  },
  allowPageScroll: false, // 先关掉全局滚动
  swipeVertical: true // 开启垂直滑动监听
});

2. 手动控制目标div的滚动行为 #

既然插件自带的页面滚动不符合需求，我们可以自己监听垂直滑动方向，直接操作目标div的scrollTop属性来实现内部滚动：

function responsiveFunction() {
  if (window.innerWidth <= 767) {
    const $scrollDiv = $("#your-target-div");
    
    // 初始化swipe插件
    $scrollDiv.swipe({
      swipeVertical: true,
      allowPageScroll: false,
      swipe: function(event, direction) {
        // 定义滚动的距离和速度，可根据需求调整
        const scrollStep = 180;
        const animateSpeed = 200;
        
        // 根据滑动方向调整滚动位置
        if (direction === "up") {
          $scrollDiv.animate({
            scrollTop: $scrollDiv.scrollTop() + scrollStep
          }, animateSpeed);
        } else if (direction === "down") {
          $scrollDiv.animate({
            scrollTop: $scrollDiv.scrollTop() - scrollStep
          }, animateSpeed);
        }
      }
    });
  } else {
    // 非移动端时销毁swipe事件，避免影响正常交互
    $("#your-target-div").swipe("destroy");
  }
}

// 页面加载和窗口尺寸变化时触发
$(document).ready(responsiveFunction);
$(window).resize(responsiveFunction);

3. 优化：只在内容超出时触发滚动 #

可以加个小判断，只有当目标div的内容高度超过容器高度时才处理滚动，避免无效操作：

// 辅助函数：判断元素是否可垂直滚动
function isScrollableVertically(el) {
  return el.scrollHeight > el.clientHeight;
}

// 在swipe回调里添加判断
swipe: function(event, direction) {
  if (!isScrollableVertically(this)) return;
  
  // 上面的滚动逻辑...
}

4. 关键CSS设置 #

别忘了给目标div设置必要的样式，让它成为可滚动容器：

#your-target-div {
  max-height: 450px; /* 给容器设置固定/最大高度，让内容超出时出现滚动条 */
  overflow-y: auto;
  /* 可选：隐藏默认滚动条，让交互更贴合移动端体验 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#your-target-div::-webkit-scrollbar {
  display: none;
}

内容的提问来源于stack exchange，提问作者Umer Farooq