-1

Как сделать, чтобы полоса прокрутки плавно появлялась, когда мы работаем с блоком, наводим на него мышкой, и плавно исчезала, когда убираем мышку?

3
  • manos.malihu.gr/jquery-custom-content-scroller там дэмо есть ...выбирайте а то что интересует тема minimal
    – user33274
    14 апр 2018 в 17:44
  • Нужно создавать свою полосу прокрутки, а браузерную скрывать. Посмотрите в сторону библиотек для реализации кастомных полос прокрутки
    – RealPeha
    14 апр 2018 в 17:48
  • Но есть у меня на примете ужасный костыль, который в полной мере решает эту задачу. И без необходимости подменять полосу прокрутки или использовать сторонние библиотеки. Сейчас попробую набросать
    – RealPeha
    14 апр 2018 в 18:05

1 ответ 1

3

Как насчет такого немного странного решения. Суть заключается в том, что мы скрываем полосу прокрутки под блоком, а при наведении на контейнер не отображаем полосу прокрутки, а плавно уменьшаем прозрачность блока, который над ней. Получается эффект появления полосы прокрутки)

.container {
  position: relative;
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
.content {
  width: 250px;
  height: 250px;
  overflow: auto;
}
.rightFakeLine {
  width: 17px;
  top: 0;
  transition: all 500ms;
  z-index: 1;
  bottom: 0;
  right: 0;
  background-color: white;
  position: absolute;
  opacity: 1;
}
.container:hover .rightFakeLine {
  opacity: 0;
  visibility:hidden;
}
<div class="container">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius lorem in felis faucibus porttitor. Morbi vitae lorem eu massa pulvinar dapibus ut malesuada nisi. Maecenas sit amet erat ante. Donec pellentesque sed nulla eu tempor. Phasellus venenatis, odio quis lobortis ultrices, sem ligula volutpat risus, eu tincidunt enim nisl et nulla. Vivamus non lacus congue, volutpat sapien id, blandit mi. Nullam at mi mauris. Vivamus non lacus congue, volutpat sapien id, blandit mi. Nullam at mi mauris. Vivamus non lacus congue, volutpat sapien id, blandit mi. Nullam at mi mauris.</div>
  <div class="rightFakeLine"></div>
</div>

Знаю, решение ужасное, но это работает и почему бы и нет. Особенно если автор не желает использовать раздутые библиотеки для такой специфичной задачи. При необходимости можно добавить и для горизонтальной прокрутки

5
  • пример хороший но получается нельзя потянуть за ползунок .. только скролить калёсиком мышки....добавь в пример на hover : visibility:hidden;
    – user33274
    14 апр 2018 в 19:40
  • С hover : visibility:hidden; не получится. Это своство сработает раньше чем значение opacity опустить до нуля, то есть этот блок пропадет мгновенно. Его нужно спятать, например углубить уменьшив z-index.
    – RealPeha
    14 апр 2018 в 20:43
  • jsfiddle.net/lenskyuser/hvu8LLjy смотри и попробуй потянуть за ползунок ... я знаю что говорю и смотри как у тебя
    – user33274
    14 апр 2018 в 20:47
  • @МаксимЛенский, да, я ошибался) Сейчас справлю
    – RealPeha
    15 апр 2018 в 6:04
  • Вполне нормальный пример. Ничего ужасного
    – Air
    15 апр 2018 в 6:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.