CSS скрывает полосу прокрутки, но имеет элемент прокручиваемый

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

<div class="left-side">
    <div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
    </div>
</div>

.left-side {
    width: 1470px;
    padding-top: 20px;
    height: 878px;
}

Я попытался настроить переполнение класса слева на авто, но это ничего не делало.

Ответ 2

если вы действительно хотите избавиться от полосы прокрутки, разделите информацию на две отдельные страницы.

Правила юзабилити на полосах прокрутки от Якоба Нильсена:

Существует пять основных правил юзабилити для прокрутки и полос прокрутки:

  • Предложите полосу прокрутки, если область имеет прокручиваемый контент. Не полагайтесь на автопрокрутку или перетаскивание, которые люди могут не заметить.
  • Скрыть полосы прокрутки, если весь контент виден. Если люди видят полосу прокрутки, они предполагают наличие дополнительного контента и будут разочарованы, если не смогут прокрутить.
  • Соблюдайте стандарты GUI и используйте полосы прокрутки, которые выглядят как полосы прокрутки.
  • Избегайте горизонтальной прокрутки на веб-страницах и сверните ее в других местах.
  • Показать всю важную информацию над сгибом. Пользователи часто решают, остаться или уйти, основываясь на том, что они могут видеть без прокрутки. Кроме того, они выделяют только 20% своего внимания ниже сгиба.

Чтобы сделать вашу полосу прокрутки видимой только тогда, когда она необходима (то есть, когда есть контент, на который можно прокрутить вниз), используйте overflow: auto.

Ответ 3

Вы можете использовать плагин SlimScroll, чтобы сделать прокрутку div, даже если она установлена ​​на overflow: hidden; (например, полоса прокрутки скрытый).

С помощью этого плагина вы также можете управлять прокруткой сенсорного экрана, а также скоростью прокрутки.

Надеюсь, что это поможет:)

Ответ 4

Аналогично ответу Kiloumap L'artélon,

::-webkit-scrollbar {
    display:none;
}

тоже работает

Ответ 5

Я соединил несколько разных ответов в SO в следующем фрагменте, который должен работать на всех, если не на большинстве, современных браузерах, как мне кажется. Все, что вам нужно сделать, это добавить класс CSS .disable-scrollbars к элементу, к .disable-scrollbars вы хотите применить это.

.disable-scrollbars::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

И если вы хотите использовать SCSS/SASS:

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  &::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
  }
}

Ответ 6

если вы используете sass, вы можете попробовать это

&::-webkit-scrollbar { 

}