CSS: не удается отобразить полосу прокрутки в DIV с горизонтальной прокруткой

avatar
Adam Bell
8 августа 2021 в 19:40
30
1
0

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

Проблема в том, что полоса прокрутки никогда не появляется, и, присмотревшись к коду, я вижу, что вложенные элементы div плавают снаружи и под основным контейнером.

Что исправить? Я озадачен, почему это происходит:

Код: https://codepen.io/databell/pen/XWRyYOK

HTML:

<section>
    <div class="timeline">
        <div class="timeline-wrapper">
            <div class="timeline-item" itemscope><p>Slide One</p></div>
            <div class="timeline-item" itemscope><p>Slide Two</p></div>
            <div class="timeline-item" itemscope><p>Slide Three</p></div>
            <div class="timeline-item" itemscope><p>Slide Four</p></div>
            <div class="timeline-item" itemscope><p>Slide Five</p></div>
            <div class="timeline-item" itemscope><p>Slide Six</p></div>
            <div class="timeline-item" itemscope><p>Slide Seven</p></div>
            <div class="timeline-item" itemscope><p>Slide Eight</p></div></div>
        </div>
    </div>
</section>

CSS:

html {
    scrollbar-width: auto;
    scrollbar-color:#ee4135 #757575;
}
section{
    padding:1.5rem 0;
}
.timeline{
    border-bottom: 56px solid #f7463c;
    overflow:auto;
}
.timeline-wrapper{
    height:220px;
    width:1000px;
    margin:0 auto;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-color:#ee4135 #757575;
    scrollbar-height:thin;
    white-space:nowrap;
}
.timeline-item{
    border-left: 4px solid #ffbd24;
    position:relative;
    display: inline-block;
    float:left;
    max-width:460px;
    width:460px;
    height:300px;
    padding-left:12px;
    padding-right:1.5rem;
}
Источник
TerminalFlow
8 августа 2021 в 20:32
0

Это может как-то помочь: css-tricks.com/pure-css-horizontal-scrolling

Ответы (1)

avatar
Nekromenzer
8 августа 2021 в 20:19
0

.timeline-wrapper{
  display:flex;
  overflow-y:hidden;
  overflow-x:scroll;
  width:1000px;
  height:250px;
}

.timeline-item{
  min-width:300px;
  height:100%;
  background:gray;
  margin: 0px 20px
}
<section>
  <div class="timeline">
        <div class="timeline-wrapper">
          <div class="timeline-item" itemscope><p>Slide One</p></div>
          <div class="timeline-item" itemscope><p>Slide Two</p></div>
          <div class="timeline-item" itemscope><p>Slide Three</p></div>
          <div class="timeline-item" itemscope><p>Slide Four</p></div>
          <div class="timeline-item" itemscope><p>Slide Five</p></div>
          <div class="timeline-item" itemscope><p>Slide Six</p></div>
          <div class="timeline-item" itemscope><p>Slide Seven</p></div>
          <div class="timeline-item" itemscope><p>Slide Eight</p></div>
      </div>
  </div>
</section>

Я упростил ваш код, удалив некоторые стили. Таким образом вы можете получить горизонтальную прокрутку.