页面加载时如何强制水平滚动条默认定位到居中位置

根源修复（无需调整页面宽度，推荐） #

图片拉伸的核心原因是父容器未设置定位基准、图片未锁定宽高比，不需要靠设置130%页面宽度绕开问题，直接按以下步骤修改：

• 给.hpf_body添加相对定位，作为绝对定位的倒计时组件的位置基准，同时约束容器宽度：

.hpf_body {
  position: relative;
  width: 100%;
  max-width: 100vw;
}

• 给横幅图片添加自适应规则，锁定宽高比避免拉伸：

.hpf_body img {
  width: 100%;
  height: auto;
  display: block;
}

• 修正body样式，避免意外溢出：

body {
  background-color: #00628c;
  max-width: 100vw;
  min-height: 100vh;
  padding: 10px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

• 修复DOM结构错误：原代码中</header>没有对应的开标签，在.hpf_body外层添加<header class="header">即可。

130%宽度兼容方案（保留原有宽度设置） #

如果需要保留130%页面宽度的设置，直接在脚本末尾添加以下代码，即可实现页面加载后水平滚动条自动居中，窗口尺寸变化时也会保持居中：

// 页面资源加载完成后滚动到水平居中位置
window.addEventListener('load', () => {
  const targetScrollX = (document.body.scrollWidth - window.innerWidth) / 2;
  window.scrollTo(targetScrollX, 0);
});
// 窗口尺寸变化时自动重新居中
window.addEventListener('resize', () => {
  const targetScrollX = (document.body.scrollWidth - window.innerWidth) / 2;
  window.scrollTo(targetScrollX, 0);
});

如果130%宽度是设置在.hpf_body容器而非body上，把代码里的document.body.scrollWidth替换为document.querySelector('.hpf_body').scrollWidth即可。 #

完整修复代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@1,800&family=Oswald&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Festive&display=swap');

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box; 
      font-family: 'Poppins', sans-serif;
    }      

    body {
      background-color: #00628c;
      max-width: 100vw;
      min-height: 100vh;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-x: hidden;
    }

    .hpf_body {
      position: relative;
      width: 100%;
      max-width: 100vw;
    }

    .hpf_body img {
      width: 100%;
      height: auto;
      display: block;
    }

    .remaining-time {
      display: flex;
      align-items: center;
      position: absolute;
      top: var(--time-unit-wrapper-top);
      left: var(--time-unit-wrapper-left);
    }   

    .remaining-time .separator {
      padding: var(--time-unit-seperator-padding);
      color: #FFFFFF00;
      font-size: 12px;
    }   

    .remaining-time .days,
    .remaining-time .hours,
    .remaining-time .minutes,
    .remaining-time .seconds {
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--time-unit-width);
      background-color: var(--time-unit-background-color);
      color: var(--time-unit-color);
      font-size: var(--time-unit-font-size);
      font-family: var(--time-unit-font-family);
      border-radius: 25%;
    }

    :root {
      --time-unit-wrapper-top: 27.5%;
      --time-unit-wrapper-left: 44%;
      --time-unit-seperator-padding: 0 8px;
      --time-unit-width: 20px;
      --time-unit-background-color: #FFFFFF00;
      --time-unit-color: #E5D5B5;
      --time-unit-border-radius: 4px;
      --time-unit-font-size: 13px;
      --time-unit-font-family: 'Exo';
    }
  </style>
</head>     

<body>
  <header class="header">
    <div class="hpf_body">
      <img src="/CServer/HomepageFeed/7D30D9006D4E4156BE0F54B95A6CFB69/LMSNEW.gif" alt="banner">  
      <div class="remaining-time">
        <span class="days"></span>
        <span class="separator">:</span>
        <span class="hours"></span>
        <span class="separator">:</span>
        <span class="minutes"></span>
        <span class="separator">:</span>
        <span class="seconds"></span>
      </div>               
    </div>       
  </header>   

  <script>
    let intervalHandler;
    // (year, months, date, hours, minutes, seconds)
    const startTime = new Date(2022, 1, 9, 10, 45, 0);
    const endTime = new Date(2022, 7, 12, 0, 0, 0);   

    const header = document.querySelector('.header');
    const remainingDaysSpan = document.querySelector('.remaining-time .days');
    const remainingHoursSpan = document.querySelector('.remaining-time .hours');
    const remainingMinutesSpan = document.querySelector('.remaining-time .minutes');
    const remainingSecondsSpan = document.querySelector('.remaining-time .seconds');     

    const addLeadingZero = str => {
      return (str.length == 1) ? '0' + str : str;
    }

    const updateRemainingTime = () => {
      const curTime = new Date();
      const timeDffSecs = (endTime - curTime) / 1000;   

      if(timeDffSecs <= 0) {
        clearInterval(intervalHandler);
        return;
      }     

      const remainingSeconds = timeDffSecs;
      const remainingMinutes = remainingSeconds / 60;
      const remainingHours = remainingMinutes / 60;
      const remainingDays = remainingHours / 24;     

      remainingDaysSpan.innerText = addLeadingZero(Math.floor(remainingDays).toString());
      remainingHoursSpan.innerText = addLeadingZero(Math.floor(remainingHours % 24).toString());
      remainingMinutesSpan.innerText = addLeadingZero(Math.floor(remainingMinutes % 60).toString());
      remainingSecondsSpan.innerText = addLeadingZero(Math.floor(remainingSeconds % 60).toString()); 
    }     

    intervalHandler = setInterval(() => {
      updateRemainingTime();
    }, 100);

    // 若使用130%宽度方案，取消下方代码注释即可
    // window.addEventListener('load', () => {
    //   const targetScrollX = (document.body.scrollWidth - window.innerWidth) / 2;
    //   window.scrollTo(targetScrollX, 0);
    // });
    // window.addEventListener('resize', () => {
    //   const targetScrollX = (document.body.scrollWidth - window.innerWidth) / 2;
    //   window.scrollTo(targetScrollX, 0);
    // });
  </script>
</body>
</html>

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