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

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

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

Я пробовал установить левосторонний класс overflow в auto, но это ничего не дало.

Программирование
html css
3-го апреля 2017 в 1:31
21 просмотров
Решение

Вы можете спрятать его:

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

Дополнительную информацию см. на сайте : https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll

kylestephens
Редактировал ответ 16-го января 2019 в 12:38
Комментарии (6)

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

Рекомендации по юзабилити в отношении полос прокрутки от Якоба Нильсена:

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

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

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

Yvonne Aburrow
Редактировал ответ 3-го апреля 2017 в 2:03
Комментарии (2)

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

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

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

Комментарии (0)