Как отобразить горизонтальную полосу прокрутки в div, содержащемся в div, со скрытой полосой прокрутки

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я хочу показать горизонтальную полосу прокрутки в моем «содержимом» div, если размер экрана меньше минимальной ширины, которую я установил для div. Для родительского «контейнера» overflow-x установлено значение hidden, поэтому прокрутка не будет отображаться для всей страницы.

 .content {
  background: cyan;
  height: 100%;
  min-width: 1500px;
  overflow-x: scroll;
  white-space: nowrap;
}

.container {
  overflow-y: auto;
  overflow-x: hidden;
}

 <div class="container">
  <div class="row">
    <div class="parent">
      <div class="content">
        This is a test.
      </div>
    </div>
  </div>
</div>

В моем текущем выводе ниже полоса прокрутки уже видна, но не прокручивается. Div также отключается. Какую часть нужно изменить, чтобы показать прокрутку? Я использую Bootstrap 4.

Ответ №1:

Чтобы включить scroll-view , вам нужно установить overflow-x: auto на .parent div, а не на .content div.

Оставьте .content ширину div 1500px равной и установите x-scrollable для .parent div, и это будет работать.

 .parent {
  width: 100%;
  overflow-x: auto;
}

.content {
  background: cyan;
  height: 100%;
  min-width: 1500px;
  white-space: nowrap;
}

.container {
  overflow-y: auto;
  overflow-x: hidden;
}

 <div class="container">
  <div class="row">
    <div class="parent">
      <div class="content">
        This is a test.
      </div>
    </div>
  </div>
</div>

1. Хотя полоса прокрутки теперь доступна для прокрутки, правая сторона обрезается, когда экран маленький.

2. Я не могу заполнить ее в текущем фрагменте. Можете ли вы прикрепить скриншот? @markuy

3. Это вывод с использованием предложенного кода: i.imgur.com/RLZC8Ll.png

4. Добавьте display: inline-block; .content класс, и он будет заполнен. Эта проблема возникла из-за того, что длина текста превышает 1500 пикселей. @markuy

Ответ №2:

Он работает так же хорошо, как и вы. Но когда вы меняете ширину вашего содержимого div, переполнение отсекается от родительского элемента, только содержимое активирует переполнение.

 .content {
  background: cyan;
  height: 100%;
  min-width: 100vw;
  overflow-x: scroll;
  white-space: nowrap;
}

.container {
  overflow-y: auto;
  overflow-x: hidden;
}

 <div class="container">
  <div class="row">
    <div class="parent">
      <div class="content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</div>