设置overflow-x:hidden后overflow-y:hidden无法禁止body纵向滚动问题

这个现象是浏览器渲染规则和CSS规范共同作用的结果，和JS逻辑、样式优先级无关：

1. 浏览器对<body>元素有特殊的滚动代理逻辑：默认状态下视口的纵向滚动是绑定在body元素上的，一旦你给body设置了任意单轴的overflow属性值为非visible（比如你设置的overflow-x: hidden），视口纵向滚动的承载容器会自动从body转移到根元素<html>上。
2. 此时你通过JS只给body设置overflow-y: hidden，只能控制body元素本身的纵向溢出，根本影响不到已经转移到html元素上的视口滚动，自然会出现样式挂载成功但依然能滚动的情况。
3. 当你手动移除body上的overflow-x: hidden后，滚动承载容器又会从html切回body，这时候body上的overflow-y: hidden就可以正常命中滚动容器，锁滚动效果自然生效。

补充规范依据：根据CSS Overflow Module Level 3标准，当overflow-x/overflow-y任意一个取值为非visible/clip时，另一个属性如果设为visible会被强制解析为auto，这也是很多人遇到单轴overflow设置失效的底层规则之一。

对应现象截图：

• 样式正确挂载但滚动未锁定状态：
  
• 移除body上overflow-x后滚动锁定生效状态：
  

根据开发场景选任意一种即可：

• 方案1（改动最小）：控制滚动锁定时，同时给html和body两个元素设置overflow属性，不要只修改body：

// 锁定纵向滚动，保留原有横向隐藏逻辑
document.documentElement.style.overflowY = 'hidden';
document.body.style.overflowY = 'hidden';
// 恢复滚动时清空内联样式即可
document.documentElement.style.overflowY = '';
document.body.style.overflowY = '';

• 方案2（规则统一）：不要把overflow-x: hidden挂在body上，统一设置到html根元素上，后续所有滚动控制逻辑都针对html元素修改，从根源上避免滚动容器在两个元素间跳转。
• 方案3（适配弹窗等复杂场景，无滚动条抖动问题）：通过给body加类名实现锁定，同时记录滚动位置避免页面跳回顶部：

/* 全局锁滚动类 */
.scroll-locked {
  position: fixed;
  top: var(--scroll-top, 0);
  left: 0;
  width: 100%;
  overflow-x: hidden;
}

// 加锁逻辑
const scrollTop = window.scrollY;
document.body.style.setProperty('--scroll-top', `-${scrollTop}px`);
document.body.classList.add('scroll-locked');

// 解锁逻辑
document.body.classList.remove('scroll-locked');
window.scrollTo(0, -parseInt(document.body.style.getPropertyValue('--scroll-top')));
document.body.style.removeProperty('--scroll-top');

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