如何使用JavaScript实现点击按钮隐藏与显示滚动条？

核心逻辑是通过修改元素的overflow CSS属性控制滚动条状态，结合按钮点击事件完成切换，以下是可行的实现代码：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        #toggleScrollBtn {
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
            margin: 20px;
        }
        .content {
            height: 1500px;
            background: linear-gradient(#eee, #ddd);
        }
    </style>
</head>
<body>
    <button id="toggleScrollBtn">隐藏滚动条</button>
    <div class="content"></div>

    <script>
        const toggleBtn = document.getElementById('toggleScrollBtn');
        let isScrollVisible = true;

        function toggleScrollbar() {
            if (isScrollVisible) {
                document.body.style.overflow = 'hidden';
                toggleBtn.textContent = '显示滚动条';
            } else {
                document.body.style.overflow = 'auto';
                toggleBtn.textContent = '隐藏滚动条';
            }
            isScrollVisible = !isScrollVisible;
        }

        toggleBtn.addEventListener('click', toggleScrollbar);
    </script>
</body>
</html>

关键说明 #

• 滚动条的显示/隐藏由overflow属性决定：hidden会隐藏滚动条，auto会恢复默认的滚动条显示逻辑
• 用isScrollVisible变量记录当前状态，每次点击按钮时切换状态，同时更新按钮文本提示用户当前操作

进阶优化（解决页面偏移问题） #

部分浏览器隐藏滚动条后，页面会因滚动条宽度消失而轻微向右偏移，可通过计算滚动条宽度并给body添加右侧内边距抵消：

const toggleBtn = document.getElementById('toggleScrollBtn');
let isScrollVisible = true;
// 计算滚动条宽度
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

function toggleScrollbar() {
    if (isScrollVisible) {
        document.body.style.overflow = 'hidden';
        document.body.style.paddingRight = `${scrollbarWidth}px`;
        toggleBtn.textContent = '显示滚动条';
    } else {
        document.body.style.overflow = 'auto';
        document.body.style.paddingRight = '0';
        toggleBtn.textContent = '隐藏滚动条';
    }
    isScrollVisible = !isScrollVisible;
}

toggleBtn.addEventListener('click', toggleScrollbar);

针对特定容器的情况 #

如果要控制的不是整个页面的滚动条，而是某个容器的，只需把document.body替换成目标容器的DOM对象即可，比如：

const targetContainer = document.getElementById('myContainer');
// 后续操作替换为targetContainer.style.overflow = ...

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