如何通过按钮切换HTML的Scroll Snapping属性实现滚动模式切换？

推荐用CSS类切换的方式来控制，比直接修改行内样式更易维护：

步骤1：调整CSS结构 #

把滚动吸附的样式抽成独立类，默认不开启或按需开启：

html, body {
    margin: 0;
    flex-direction: column;
}
/* 滚动吸附生效的类 */
html.snap-enabled, body.snap-enabled {
    scroll-snap-type: y mandatory;
}

步骤2：添加切换按钮 #

在HTML里加一个控制按钮：

<button id="scrollModeToggle">关闭滚动吸附</button>

步骤3：编写JavaScript逻辑 #

监听按钮点击，给html和body元素切换类（html元素通过document.documentElement获取）：

const toggleBtn = document.getElementById('scrollModeToggle');
// 初始开启滚动吸附，给元素加类
document.documentElement.classList.add('snap-enabled');
document.body.classList.add('snap-enabled');

toggleBtn.addEventListener('click', () => {
    const htmlEl = document.documentElement;
    const bodyEl = document.body;
    
    // 切换类：存在则移除，不存在则添加
    htmlEl.classList.toggle('snap-enabled');
    bodyEl.classList.toggle('snap-enabled');
    
    // 更新按钮文字提示当前模式
    toggleBtn.textContent = htmlEl.classList.contains('snap-enabled') 
        ? '关闭滚动吸附' 
        : '开启滚动吸附';
});

备选：直接修改行内样式（不推荐） #

如果不想用类，也可以直接通过JS修改元素的行内样式：

const toggleBtn = document.getElementById('scrollModeToggle');
let isSnapOn = true;

toggleBtn.addEventListener('click', () => {
    const htmlEl = document.documentElement;
    const bodyEl = document.body;
    
    if (isSnapOn) {
        htmlEl.style.scrollSnapType = 'none';
        bodyEl.style.scrollSnapType = 'none';
        toggleBtn.textContent = '开启滚动吸附';
    } else {
        htmlEl.style.scrollSnapType = 'y mandatory';
        bodyEl.style.scrollSnapType = 'y mandatory';
        toggleBtn.textContent = '关闭滚动吸附';
    }
    isSnapOn = !isSnapOn;
});

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