页面出现滚动条的时候如何让滚动条不影响页面宽度

要让页面出现滚动条的时候不影响页面宽度，我们可以采用以下几种方法：

一、使用 overflow: hidden;

可以在需要限制宽度的容器上设置 overflow: hidden;。这样就能阻止滚动条的出现，同时保持页面的宽度不变。

.container {
  max-width: 1000px;
  overflow: hidden;
}

二、使用 overflow-y: scroll;

如果我们仅想在垂直方向上出现滚动条，可以使用 overflow-y: scroll;。这样做会在垂直方向上出现滚动条，但不会改变页面的宽度。

.container {
  max-width: 1000px;
  overflow-y: scroll;
}

示例说明

示例一：overflow: hidden;

以下是一个示例，当窗口缩小到一定程度时，会出现滚动条，但整个页面的宽度始终保持不变。

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu dolor sit amet neque interdum bibendum. Maecenas sed nisl vel ipsum lobortis rutrum vitae vel nibh. Morbi nec malesuada sem. Donec porta lectus id libero malesuada porta at a risus. Ut malesuada ante risus, et pretium arcu suscipit et. Donec nec neque massa. </p>
  <p>Etiam vulputate mi et dolor commodo congue. Etiam vehicula purus at justo congue, in ultrices justo malesuada. Fusce nisl arcu, tempor sed est et, viverra semper est. Praesent rhoncus sapien nec purus malesuada, vel eleifend turpis gravida. Ut sit amet blandit leo. Nam sit amet tristique ligula.</p>
  <p>Aliquam erat volutpat. Sed tempor pellentesque lobortis. Fusce ut rutrum mauris. Donec in nunc enim. Vestibulum sed pharetra sapien. </p>
  <p>Ut vitae nulla ut nulla ultricies mollis. Phasellus enim odio, pulvinar et leo ac, molestie semper sem. Etiam sed pellentesque diam, in rhoncus enim. Donec a felis vitae mauris vestibulum tempus. Nullam id ultricies sem. Quisque sollicitudin cursus libero, vel venenatis dui. Fusce bibendum lacus et finibus rutrum. </p>
  <p>Maecenas sit amet viverra libero, eget cursus purus. Aliquam efficitur tristique nulla sed euismod. Praesent nec nunc quis metus congue semper. Aliquam lobortis feugiat turpis eget imperdiet. In eget arcu leo. Nam imperdiet mollis ipsum in eleifend. </p>
  <p>Cras rhoncus urna sit amet diam faucibus, vel lacinia sem porttitor. Integer eleifend laoreet massa vitae fermentum. Duis nec mauris id neque elementum rhoncus. Sed semper est nec est ultrices vestibulum. </p>
  <p>Nunc imperdiet dui nec vestibulum accumsan. Sed eget lectus et ligula varius hendrerit. Sed a rutrum nisi, vel ullamcorper nulla. Sed turpis libero, lacinia vel scelerisque at, tristique a purus. Donec ultrices, metus nec volutpat placerat, nunc arcu lacinia mi, vel tincidunt nisi ipsum id diam. </p>
  <p>Donec faucibus varius risus, vel gravida ipsum viverra eget. Sed leo mauris, pulvinar et aliquet nec, lacinia dignissim tellus. Donec vel nibh vel leo rhoncus condimentum in sit amet metus. Etiam aliquet dolor sit amet odio venenatis, vel feugiat arcu malesuada. </p>
  <p>Pellentesque aliquet augue vitae quam sollicitudin, auctor feugiat eros convallis. Curabitur pulvinar metus lacus, sed aliquam sapien bibendum non. </p>
  <p>Donec vel nisl quis ligula bibendum rhoncus vitae et ex. Ut felis sem, malesuada at leo non, molestie interdum est. Nam tristique laoreet neque eu tincidunt. Suspendisse potenti. Morbi iaculis rutrum purus, sit amet ultricies tellus ultrices id. </p>
  <p>Suspendisse in dictum magna, sit amet porttitor justo. Nulla interdum sapien eu dui faucibus, non lobortis metus bibendum. In eget malesuada purus. Ut sit amet sapien id elit pellentesque consectetur nec sed risus. </p>
</div>

.container {
  max-width: 800px;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px;
}

示例二：overflow-y: scroll;

以下是另一个示例，只有竖直方向上出现滚动条，横向滚动条不会出现。

<div class="container">
  <table>
    <thead>
      <tr>
        <th>行号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>职业</th>
        <th>工资</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
        <td>程序员</td>
        <td>$2,500</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
        <td>男</td>
        <td>设计师</td>
        <td>$3,000</td>
      </tr>
      <!--省略后面内容-->
    </tbody>
  </table>
</div>

.container {
  max-width: 800px;
  overflow-y: scroll;
  margin: 0 auto;
}