为何设置html的overflow-x:hidden会影响回到顶部按钮脚本功能？

问题根源 #

当给<html>标签设置overflow-x: hidden时，浏览器的滚动容器发生了转移——原本由<body>承担的滚动行为被切换到<html>上，但你的判断逻辑同时依赖document.body.scrollTop和document.documentElement.scrollTop，再加上<html>设置了height: 100%，导致document.documentElement.scrollTop计算异常，无法正确识别页面是否回到顶部，最终按钮的隐藏逻辑失效。

修复方案 #

方案1：用标准API统一判断滚动状态 #

直接使用document.scrollingElement获取当前浏览器的滚动容器，它会自动适配<html>或<body>作为滚动元素的场景，修改JS逻辑：

function scrollFunction() {
  if (document.scrollingElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// 回到顶部的逻辑也可以简化
function topFunction() {
  document.scrollingElement.scrollTop = 0;
}

方案2：调整overflow-x的应用对象 #

把overflow-x: hidden只赋值给<body>，<html>保留默认滚动行为，这样既解决右侧空白，又不影响滚动判断：

html {
  height: 100%;
  scroll-behavior: smooth;
  position: relative;
  /* 移除overflow-x: hidden */
}

body {
  height: 100%;
  scroll-behavior: smooth;
  position: relative;
  overflow-x: hidden; /* 移到body上 */
  background-color:#060606;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

此时滚动容器还是<body>，原来的JS判断逻辑会正常生效。

方案3：从根源消除右侧空白 #

如果不想依赖overflow-x: hidden隐藏空白，检查页面中是否有元素超出视口宽度——比如用了width: 100vw却没考虑滚动条宽度，或者元素的margin/padding导致总宽度超过100%。先给所有元素重置盒模型：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

再把宽度过大的元素的width: 100vw改成width: 100%，这样即使不设置overflow-x: hidden，页面也不会出现右侧空白，按钮逻辑自然恢复正常。

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