如何在移动端视图下禁用jquery fsscroll实现自由滚动？

问题根源 #

你当前的实现逻辑存在2个核心缺陷，导致移动端滚动限制无法失效：

1. 页面加载时fsscroll插件已经完成初始化，绑定了滚动拦截事件，后续删除script、link标签或者移除data属性都不会清除已经生效的插件逻辑
2. resize 事件仅在窗口尺寸变化时触发，页面首次打开如果就是移动端尺寸，不会触发你写的适配逻辑，默认会保留分段滚动配置

修复方案 #

1. 调整HTML头部的资源引用

把fsscroll的默认资源路径去掉，避免页面加载时直接初始化插件：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="shortcut icon" href="css/img/logo.png">
  <!-- 移除默认的href，需要时动态加载 -->
  <link id="link" rel="stylesheet" href="">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- 移除默认的src，需要时动态加载 -->
  <script id="script" src=""></script>
  <title>Tiger</title>
</head>

2. 重写JS适配逻辑

增加页面初始化判断、插件销毁逻辑和resize防抖处理：

// 防抖函数，避免resize频繁触发
function debounce(func, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  }
}

// 滚动适配逻辑
function handleScrollAdapt() {
  const winWidth = $(window).width();
  // 桌面端逻辑
  if (winWidth >= 768) {
    $("#main").addClass('main').attr("data-fs-scroll", "");
    // 避免重复加载资源
    if ($("#link").attr("href") === "") {
      $("#link").attr("href", "one-page-scroll-fsscroll/src/jquery.fsscroll.css");
    }
    if ($("#script").attr("src") === "") {
      $("#script").attr("src", "one-page-scroll-fsscroll/src/jquery.fsscroll.min.js");
      // 等插件加载完成再初始化
      $("#script")[0].onload = function() {
        $("#main").fsscroll();
      }
    } else {
      // 已经加载过插件直接初始化
      $("#main").fsscroll();
    }
  } 
  // 移动端逻辑
  else {
    // 先销毁插件实例，清除绑定的滚动事件
    if ($.fn.fsscroll) {
      $("#main").fsscroll('destroy');
    }
    // 移除相关属性和类
    $("#main").removeClass('main').removeAttr("data-fs-scroll");
    $("#link").removeAttr("href");
    $("#script").removeAttr("src");
    // 重置滚动样式，确保可以自由滚动
    $("body, html, #main, .sections, .section").css({
      height: "auto",
      overflow: "auto"
    });
  }
}

// 页面加载完成先执行一次适配
$(document).ready(function() {
  handleScrollAdapt();
  // resize时加300ms防抖
  $(window).on('resize', debounce(handleScrollAdapt, 300));
});

3. 补充CSS适配（可选）

如果你的样式表中给.main、.section设置了固定高度、溢出隐藏等适配分段滚动的属性，可以直接在CSS里加媒体查询兜底：

@media screen and (max-width: 767px) {
  #main, .sections, .section {
    height: auto !important;
    overflow: auto !important;
  }
}

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