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

Question

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

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

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

Answer 1

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

Будет что-то вроде этой работы?

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Если вы только беспокойство по поводу показа/скрытия, этот код будет работать нормально:

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

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

Answer 5

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

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

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

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

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

Answer 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 example