Блог

Главная - Вопросы по программированию - Горизонтальная полоса прокрутки, выходящая за пределы ширины контейнера

Горизонтальная полоса прокрутки, выходящая за пределы ширины контейнера

#html #css #scroll #scrollbar

#HTML #css #прокрутка #полоса прокрутки

Вопрос:

Я работаю над целевой страницей.

В третьем разделе у меня будет контент с горизонтальной полосой прокрутки. У меня уже есть желаемое поведение прокрутки, но я бы хотел, чтобы полоса прокрутки соответствовала контейнеру страницы.

Вот мой текущий код:

 .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

Ответ №1:

Я не совсем уверен, что понимаю вопрос. Третий раздел не был бы правильно оформлен в контейнере, потому что вы не поместили его в контейнер. Я перенес стили класса container в стиль класса page и удалил все контейнеры для достижения желаемого эффекта.

 .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>

Комментарии:

1. Мне нужно, чтобы содержимое перемещалось из левого угла в правый угол, на 100% от ширины страницы, это у меня уже есть в моем коде, мне просто нужно, чтобы полоса прокрутки была размером с «.контейнер»

2. Не уверен, что вы можете выполнить это с помощью обычной полосы прокрутки. Не уверен, что вы тоже этого хотите, поскольку стилизация полос прокрутки проблематична в разных браузерах. Может выглядеть не очень красиво, например, в Edge. Возможно, стоит подумать о создании пользовательской полосы прокрутки, над которой у вас будет больше контроля. Пример, на который вы ссылаетесь, выглядит так, как будто в нем используется что-то пользовательское.