如何将window.innerWidth数据传入函数，实现页面自动滚动居中？

你的代码存在两个核心问题： #

1. 大小写与属性名错误
   JavaScript严格区分大小写，你写的Window.innerwidth有两处错误：

   • 全局窗口对象是小写的window，不是大写的Window
   • 视口宽度的标准属性是驼峰命名的innerWidth，不是全小写的innerwidth

2. 滚动位置逻辑错误
   直接用window.innerWidth/2作为水平滚动偏移量，只能得到当前视口宽度的一半，无法让页面水平居中。正确的水平居中偏移量应该是**(文档总宽度 - 视口宽度) / 2**，这样才能让页面的中间部分对齐到视口中间。

修正后的代码（保持垂直滚动到300px，水平居中） #

function Scrolldown() {
  // 计算水平居中的偏移量
  const horizontalCenter = (document.documentElement.scrollWidth - window.innerWidth) / 2;
  window.scroll(horizontalCenter, 300);
}

window.onload = Scrolldown;

如果需要页面完全居中（水平+垂直） #

function scrollToCenter() {
  const horizontalOffset = (document.documentElement.scrollWidth - window.innerWidth) / 2;
  const verticalOffset = (document.documentElement.scrollHeight - window.innerHeight) / 2;
  window.scroll(horizontalOffset, verticalOffset);
}

window.onload = scrollToCenter;

如何将window.innerWidth/height传入另一个函数 #

可以把计算逻辑封装成独立函数，将视口宽高作为参数传入：

// 封装计算居中偏移的函数
function getCenterOffsets(viewportWidth, viewportHeight) {
  const docTotalWidth = document.documentElement.scrollWidth;
  const docTotalHeight = document.documentElement.scrollHeight;
  return {
    x: (docTotalWidth - viewportWidth) / 2,
    y: (docTotalHeight - viewportHeight) / 2
  };
}

function scrollToCenter() {
  // 传入视口宽高到封装函数
  const offsets = getCenterOffsets(window.innerWidth, window.innerHeight);
  window.scroll(offsets.x, offsets.y);
}

window.onload = scrollToCenter;

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