У меня есть элемент под названием 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 {
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
если вы действительно хотите избавиться от полосы прокрутки, разделите информацию на две отдельные страницы.
Рекомендации по юзабилити в отношении полос прокрутки от Якоба Нильсена:
Существует пять основных правил юзабилити для прокрутки и полос прокрутки:
- Предлагайте полосу прокрутки, если область имеет прокручиваемое содержимое. Не полагайтесь на автопрокрутку или на перетаскивание, которое люди могут не заметить.
- Скрывайте полосы прокрутки, если все содержимое видно. Если люди видят полосу прокрутки, они предположат, что там находится дополнительное содержимое, и будут расстроены, если не смогут > прокрутить его. прокрутка.
- Соблюдайте стандарты GUI и используйте полосы прокрутки, которые выглядят как. полосы прокрутки.
- Избегайте горизонтальной прокрутки на веб-страницах и минимизируйте ее. в других местах.
- Показывайте всю важную информацию выше сгиба. Пользователи часто решают, остаться или уйти, основываясь на том, что они могут увидеть. без прокрутки. Кроме того, они выделяют только 20% своего внимания под сгибом.
Чтобы сделать полосу прокрутки видимой только тогда, когда она необходима (т.е. когда есть контент для прокрутки вниз), используйте overflow: auto
.
Вы можете воспользоваться плагином SlimScroll, чтобы сделать div прокручиваемым, даже если он имеет значение overflow: hidden;
(т.е. полоса прокрутки скрыта).
С помощью этого плагина вы также можете управлять сенсорной прокруткой и скоростью прокрутки.
Надеюсь, это поможет :)