Next.js中设置document.body.style.overflow为hidden仍无法冻结滚动求解决方案

核心原因 #

仅设置document.body.style.overflow = 'hidden'无效，通常是因为实际滚动容器是<html>元素而非<body>；或是移动端触摸滚动未被阻止，亦或是页面存在自定义滚动容器。

具体解决方法 #

1. 同时锁定<html>和<body>元素 #

直接同时设置两者的overflow属性，覆盖默认滚动容器：

const toggleScroll = () => {
  const html = document.documentElement;
  const body = document.body;
  const isLocked = body.style.overflow === 'hidden';
  
  html.style.overflow = isLocked ? '' : 'hidden';
  body.style.overflow = isLocked ? '' : 'hidden';
};

2. 兼容移动端触摸滚动 #

移动端浏览器会忽略overflow设置，需额外阻止touchmove事件：

let isScrollLocked = false;
const preventTouchScroll = (e: TouchEvent) => e.preventDefault();

const toggleScroll = () => {
  const html = document.documentElement;
  const body = document.body;
  isScrollLocked = !isScrollLocked;

  if (isScrollLocked) {
    html.style.overflow = 'hidden';
    body.style.overflow = 'hidden';
    document.addEventListener('touchmove', preventTouchScroll, { passive: false });
  } else {
    html.style.overflow = '';
    body.style.overflow = '';
    document.removeEventListener('touchmove', preventTouchScroll);
  }
};

3. 适配Next.js SSR场景 #

服务端渲染时document对象不存在，需用useEffect包裹DOM操作：

import { useEffect, useState } from 'react';

export default function Home() {
  const [isScrollLocked, setIsScrollLocked] = useState(false);

  useEffect(() => {
    const html = document.documentElement;
    const body = document.body;

    if (isScrollLocked) {
      html.style.overflow = 'hidden';
      body.style.overflow = 'hidden';
    } else {
      html.style.overflow = '';
      body.style.overflow = '';
    }
  }, [isScrollLocked]);

  return (
    <div>
      <button onClick={() => setIsScrollLocked(prev => !prev)}>
        {isScrollLocked ? '解锁滚动' : '冻结滚动'}
      </button>
      {/* 页面长内容 */}
    </div>
  );
}

4. 检查自定义滚动容器 #

如果页面内容在自定义div内滚动（比如设置了overflow-y: auto的容器），需锁定该容器而非body：

const toggleScroll = () => {
  const scrollContainer = document.querySelector('.custom-scroll-container');
  if (scrollContainer) {
    scrollContainer.style.overflow = scrollContainer.style.overflow === 'hidden' ? 'auto' : 'hidden';
  }
};

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