html - 超出容器宽度的水平滚动条

Question

我正在制作着陆页。

在第三部分中，我将提供带有水平滚动条的内容。我已经有了所需的滚动行为，但我希望滚动条尊重页面的容器。

这是我当前的代码:

.page {
        overflow: hidden;
      }
      .container {
        width: 60%;
        margin: auto;
      }

      h3 {
        background: #dbd0bc;
        color: #000;
        padding: 1rem;
      }

      .hs {
        list-style: none;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        width: 100%;
        padding: 0 20% 2rem 20%;
      }

      .hs .item {
        display: inline-block;
        width: 17rem;
        background: #dbd0bc;
        text-align: center;
        margin-right: 0.75rem;
        height: 10rem;
        white-space: normal;
      }

      ::-webkit-scrollbar {
        height: 15px;
      }

      ::-webkit-scrollbar-track-piece {
        background-color: gray;
      }

      ::-webkit-scrollbar-thumb:horizontal {
        background-color: red;
        border-radius: 2rem;
      }

<div class="page">
      <div class="container">
        <h3>Section 1</h3>
      </div>

      <div class="container">
        <h3>Section 2</h3>
      </div>

      <ul class="hs">
        <li class="item">section 3</li>
        <li class="item">section 3</li>
        <li class="item">section 3</li>
        <li class="item">section 3</li>
        <li class="item">section 3</li>
        <li class="item">section 3</li>
        <li class="item">section 3</li>
        <li class="item">section 3</li>
      </ul>

      <div class="container">
        <h3>Section 4</h3>
      </div>
    </div>

以下是我希望的两个示例: https://prnt.sc/n0o0k7 https://prnt.sc/n0o21r

Answer 1

我不太确定我理解这个问题。第三部分在容器中的样式不会正确，因为您没有将其包装在容器中。我将容器类的样式移动到页面类的样式并删除了所有容器以达到您想要的效果。

.page {
  overflow: hidden;
  width: 60%;
  margin: auto;
}

h3 {
  background: #dbd0bc;
  color: #000;
  padding: 1rem;
}

.hs {
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 0 20% 2rem 20%;
}

.hs .item {
  display: inline-block;
  width: 17rem;
  background: #dbd0bc;
  text-align: center;
  margin-right: 0.75rem;
  height: 10rem;
  white-space: normal;
}

 ::-webkit-scrollbar {
  height: 15px;
}

 ::-webkit-scrollbar-track-piece {
  background-color: gray;
}

 ::-webkit-scrollbar-thumb:horizontal {
  background-color: red;
  border-radius: 2rem;
}

<div class="page">
  <h3>Section 1</h3>
  <h3>Section 2</h3>
  <ul class="hs">
    <li class="item">section 3</li>
    <li class="item">section 3</li>
    <li class="item">section 3</li>
    <li class="item">section 3</li>
    <li class="item">section 3</li>
    <li class="item">section 3</li>
    <li class="item">section 3</li>
    <li class="item">section 3</li>
  </ul>

  <h3>Section 4</h3>
</div>