Как показать полосу прокрутки только при наведении? (поддержка мобильных)

Question

Я столкнулся с интересной проблемой дизайна.Мне нужно сделать полосу прокрутки как в youtube меню (левое меню): полоса прокрутки по умолчанию скрыта, но с: hover show scrollbar.

Я использую переполнение: скрыто и переполнение: авто (для: зависания).Но для мобильных устройств этот метод не работает.

Я ищу решение и нахожу несколько интересных способов: https://codepen.io/kizu/pen/OyzGXY

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover,
.scrollbox:focus {
  visibility: visible;
}

.scrollbox_delayed {
  transition: visibility 0.2s;
}
.scrollbox_delayed:hover {
  transition: visibility 0s 0.2s;
}

<h2>Hover it</h2>
<div class="scrollbox" tabindex="0">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

<h2>With delay</h2>
<div class="scrollbox scrollbox_delayed" tabindex="0">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

Но я не знаю высоту обертки, и это решение не работает для меня.

Есть ли рабочий способ сделатьчто-то подобное без использования JS?Если нет, то какое самое простое решение для JS?(я нахожу пример по JS-библиотеке: https://tympanus.net/Tutorials/ScrollbarVisibility/index.html)

Answer 1

Я нашел решение своей проблемы. Это оказалось очевидным методом: медиа-запрос. Я установил медиа-запрос (: hover) для больших устройств (ПК). А для небольших устройств прокрутка всегда отображается.

Конечно, это решение может не подходить для всех, но для меня оно оказалось хорошим решением.

Для универсального решения подходит JS (как сказал Эдуард Рейнах).

Answer 2

Рендеринг полосы прокрутки очень противоречив в разных браузерах.Например, на Mac это поведение, которое вы описываете по умолчанию при использовании webkit.

Если вы хотите, чтобы что-то работало на всех устройствах, вам следует полагаться на решение JS.

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