添加<!DOCTYPE html>后JavaScript垂直滚动失效的原因及解决方法

原因 #

页面未声明<!DOCTYPE html>时，浏览器会进入怪异模式（Quirks Mode），此时页面的滚动容器是<body>元素；添加<!DOCTYPE html>后，浏览器切换到标准模式（Standards Mode），整个页面的滚动容器变为<html>元素（即document.documentElement），直接调用body.scrollTo()自然失效。

解决方法 #

针对标准模式下的全局滚动需求，有几种可靠的实现方式：

方式1：使用window.scrollTo()（推荐） #

这是最直接的全局滚动方法，兼容所有现代浏览器：

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
  <script defer>
    document.addEventListener('readystatechange', event => { 
      if (event.target.readyState === "complete") {
        window.scrollTo(0, 1110);
      }
    });
  </script>
</head>
<body>
  <div>
    <img src="https://www.cam.ac.uk/sites/www.cam.ac.uk/files/shorthand/204072/Y4qHbMIuob/assets/tW5uZTUHvH/credit-timothy-soar_160804-forest-133_1440-by-2560-750x1333.jpeg" />
  </div>
</body>
</html>

方式2：操作<html>元素的scrollTo #

直接定位标准模式下的滚动容器：

document.documentElement.scrollTo(0, 1110);

方式3：自动适配模式的document.scrollingElement #

该属性会自动识别当前浏览器的滚动容器（兼容怪异/标准模式）：

document.scrollingElement.scrollTo(0, 1110);

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