Горизонтальная прокрутка и переполнение

Question

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

Hide scroll bar, but still being able to scroll

Что я сейчас:

nav { 
    display: inline; 
    white-space: nowrap; 
    width: 100%; 
    height: 100%; 
    min-width: 75em; 
    overflow-y: hidden; 
    overflow-x: hidden; 

    .overflow_wrap { 
     overflow-x: scroll; 
     overflow-y: hidden; 
     -ms-overflow-style: none; 
     width: 100%; 
     height: 100%; 
     height: auto; 
     text-align: center; 
     float: left; 
     background-color: $white; 
     border-bottom: 1px solid $third_fontcolor; 

     &::-webkit-scrollbar { 
      width: 0 !important; 
      display: none; 
      background: transparent; 
     } 

    } 

} 

Я могу прокручивать по горизонтали, но я все еще вижу скроллбар в других браузерах затем Chrome. Есть ли способ исправить это? Я видел несколько решений для вертикальной прокрутки без просмотра полосы прокрутки, но не для горизонтальной. Вероятно, я что-то пропустил.

Answer 1

#parent{ 
 
    height: 100px; 
 
    width: 100px; 
 
    overflow: hidden; 
 
} 
 

 
#child{ 
 
    height: 100px; /* set the width 20px longer, so that vertical scroll disabled */ 
 
    width: 120px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
#child2{ 
 
    width: 100px; /* real width for scrolling */ 
 
\t font-size:30px; 
 
\t background:#ff0; 
 
\t word-wrap:break-word; 
 
}

<div id="parent"> 
 
\t <div id="child"> 
 
\t \t <div id="child2">kjhdsvcbsk,jgfnbv lihkfxdkjfdxhlgbfdzkjvdrjbgkjdxblkjhgvbdzkjbvkjdzbvkjldzgvkjhgbdzlkbvlkjdzkjvdzhflkjbhfdzkjbghlkjfdznbbdxblsergdrsnttdrhytdjnhtdumhykjdnijertsnbvls</div> 
 
\t </div> 
 
</div>

Код выше, вы можете удалить вещи, которые вам не нужны.

Важные моменты отметить:

1. набор 3 слоев элемента;
2. для внешнего слоя, установите переполнение для скрытия и задайте ширину и высоту, которые вы хотите;
3. для второго слоя, установите ширину или высоту примерно на 20 пикселей больше, чем у первого слоя. Установите переполнение-x для скрытия, если вы хотите, чтобы вертикальная полоса прокрутки была скрыта; в противном случае установить overflow-y для скрытия;

Это зависит от того, должны ли быть скрыты горизонтальные или вертикальные; Если горизонтальный, установите ширину; в противном случае установить высоту;

4. для конечного дочернего элемента, установите ширину и высоту в нужное значение.

Answer 2

Существует способ, и это просто - используйте overflow-x: auto вместо overflow-x: scroll, чтобы браузеры использовали свое поведение по умолчанию.

Answer 3

Просто тест, который отлично работает.

#parent{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#child{ 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ 
}