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;
}

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

Ответы

Ответ 1

Вы можете скрыть это:

html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

Для получения дополнительной информации см.: Скрыть полосу прокрутки, но при этом возможность прокрутки

Ответ 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 { 

}