Сделать полосы прокрутки видимыми только тогда, когда Div зависает?

Я пытаюсь выяснить, как иметь прокручиваемый div, который показывает только свои полосы прокрутки при наведении указателя мыши.

Пример поиска Google Image, на изображении ниже вы можете увидеть, как левая боковая панель не кажется прокручиваемой, пока вы не наведете на нее курсор.

Возможно ли это с помощью CSS или требуется Javascript? Если возможно, возможно, быстрый пример того, как выполнить такую задачу?

Ответ 1

#div { overflow:hidden;height:whatever px; }
#div:hover { overflow-y:scroll; }

Будет ли что-то подобное работать?

Ответ 2

Ответ с изменением переполнения имеет множество проблем, таких как несогласованная ширина внутреннего блока и запуск reflow.

Существует более простой способ получить тот же эффект, который бы не вызывал повторение: использование свойства visibility и вложенных блоков:

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

Вот ручка с рабочим примером: http://codepen.io/kizu/pen/OyzGXY

Другая особенность этого метода заключается в том, что visibility является анимированным, поэтому мы можем добавить к нему переход (см. второй пример в ручке выше). Добавление перехода было бы лучше для UX: полоса прокрутки не будет отображаться сразу же при наведении курсора только при перемещении к другому элементу, и было бы труднее пропустить полосу прокрутки, когда она будет нацеливаться на нее с помощью курсора мыши, поскольку она не скроется сразу, как хорошо.

Ответ 3

Я думаю что-то вроде

$("#leftDiv").mouseover(function(){$(this).css("overflow","scroll");});
$("#leftDiv").mouseout(function(){$(this).css("overflow","hidden");});

Ответ 4

Дайте div фиксированную высоту и srcoll: hidden; и при наведении измените прокрутку на авто;

#test_scroll{ height:300px; overflow:hidden;}
#test_scroll:hover{overflow-y:auto;}

Вот пример. http://jsfiddle.net/Lywpk/

Ответ 5

Если вы только заботитесь о показе/скрытии, этот код будет работать очень хорошо:

$("#leftDiv").hover(function(){$(this).css("overflow","scroll");},function(){$(this).css("overflow","hidden");});

Однако он может изменить некоторые элементы в вашем дизайне, если вы используете width = 100%, учитывая, что при скрытии полосы прокрутки она создает немного больше места для вашей ширины.

Ответ 6

Один трюк для этого, для браузеров webkit, - это создать невидимую полосу прокрутки, а затем заставить ее отображаться при наведении. Этот метод не влияет на ширину полосы прокрутки, поскольку пространство, необходимое для полосы прокрутки, уже существует.

Что-то вроде этого:

.scrolling-div {
  &::-webkit-scrollbar {
    background-color: transparent;
    width: 10px;
  }
&::-webkit-scrollbar-thumb {
    background-color: transparent;
}

}

.scrolling-div:hover {
&::-webkit-scrollbar-thumb {
    background-color: black;
}

}

пример codepen