如何通过Scrollify实现仅按钮触发滚动，禁用触摸与鼠标滚动？

嘿，刚好我之前折腾过类似的需求，这就给你把可行的方案拆解清楚——不管是针对Scrollify的精准配置，还是临时救急的办法，甚至是替代实现方式，都给你列出来了！

一、针对Scrollify的核心配置（彻底禁用默认滚动） #

Scrollify本身自带一些配置项可以关掉默认触发源，再配合原生事件拦截，就能做到只允许按钮触发：

1. 初始化时禁用Scrollify自带的触发方式
   在Scrollify的初始化代码里加上这几个关键参数，直接把鼠标滚轮、触摸滚动这些触发源关掉：

   $.scrollify({
     section: ".section", // 替换成你的滚动区块选择器
     scrollSpeed: 800,
     touchScroll: false, // 禁用触摸滑动触发
     mouseWheel: false, // 禁用鼠标滚轮触发
     scrollbars: false, // 隐藏页面滚动条
     // 保留你原本的其他配置...
   });
   

2. 拦截页面原生滚动事件
   有些场景下浏览器的原生滚动还是会生效（比如拖动页面边缘、按上下键/空格），所以要手动拦截这些事件：

   // 拦截鼠标滚轮事件
   $(document).on("mousewheel DOMMouseScroll", function(e) {
     e.preventDefault();
   });
   
   // 拦截键盘滚动触发（上、下、空格键）
   $(document).on("keydown", function(e) {
     const forbiddenKeys = [38, 40, 32];
     if (forbiddenKeys.includes(e.keyCode)) {
       e.preventDefault();
     }
   });
   
   // 拦截触摸滑动事件
   document.addEventListener('touchmove', function(e) {
     e.preventDefault();
   }, { passive: false }); // 这里必须设为false，不然部分浏览器无法阻止默认行为
   

   注意： 如果你的页面有局部需要滚动的小区域，记得给这些区域单独排除拦截，比如给它们加个类，在事件里判断目标元素是否属于这个类，再决定是否阻止默认行为。

3. 按钮触发滚动的代码
   给你的按钮绑定点击事件，用Scrollify提供的方法来触发滚动：

   // 滚动到下一个区块
   $("#next-btn").click(function() {
     $.scrollify.next();
   });
   
   // 滚动到上一个区块
   $("#prev-btn").click(function() {
     $.scrollify.previous();
   });
   
   // 滚动到指定区块（比如id为section2的区块）
   $("#go-to-section2").click(function() {
     $.scrollify.move("#section2");
   });
   

二、临时解决方案（快速生效，适合测试） #

如果上面的配置遇到兼容性问题（比如某些移动端浏览器拦截触摸事件失效），可以试试这个简单粗暴的方案：直接给页面加锁，让整个页面无法滚动：

• 先加个CSS类：

  .scroll-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
  

• 初始化页面时给body加上这个类：

  $("body").addClass("scroll-locked");
  

  这个方法的优点是快速生效，缺点是会锁住页面所有滚动（包括局部滚动区域），所以适合整个页面都是全屏滚动区块的场景。

三、其他替代实现方式（不用Scrollify的情况） #

如果觉得Scrollify的配置太繁琐，也可以试试这些替代方案：

方式1：原生JS自定义全屏滚动 #

自己写逻辑也不难，核心是监听按钮点击，用原生的scrollIntoView实现平滑滚动：

html {
  scroll-behavior: smooth; /* 开启平滑滚动效果 */
  overflow: hidden; /* 隐藏原生滚动条 */
}

.section {
  height: 100vh;
  width: 100%;
}

const sections = document.querySelectorAll(".section");
let currentSectionIndex = 0;

// 下一页按钮
document.getElementById("next-btn").addEventListener("click", () => {
  if (currentSectionIndex < sections.length - 1) {
    currentSectionIndex++;
    sections[currentSectionIndex].scrollIntoView();
  }
});

// 上一页按钮
document.getElementById("prev-btn").addEventListener("click", () => {
  if (currentSectionIndex > 0) {
    currentSectionIndex--;
    sections[currentSectionIndex].scrollIntoView();
  }
});

记得加上之前的事件拦截代码，禁用鼠标、触摸、键盘滚动。

方式2：使用fullPage.js替代Scrollify #

fullPage.js是另一个成熟的全屏滚动库，它的配置更直观，禁用默认滚动的选项很清晰：

new fullpage('#fullpage', {
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
  navigation: false,
  scrollBar: false,
  keyboardScrolling: false, // 禁用键盘滚动
  mouseWheel: false, // 禁用鼠标滚轮
  touchSensitivity: 0, // 禁用触摸滚动
});

// 按钮触发滚动
document.getElementById('next-btn').onclick = () => fullpage_api.moveSectionDown();
document.getElementById('prev-btn').onclick = () => fullpage_api.moveSectionUp();

这个库的兼容性和功能都很完善，适合不想折腾Scrollify的场景。

内容的提问来源于stack exchange，提问作者유창박