Czy paski przewijania są widoczne tylko po obróceniu Div?

Question

Próbuję dowiedzieć się, jak mieć przewijany div, który pokazuje tylko paski przewijania, gdy są ukryte.

Przykład to wyszukiwarka grafiki Google, na poniższym obrazku widać, jak lewy pasek boczny nie wydaje się być przewijany, dopóki nie najedziesz na niego myszą.

Czy jest to możliwe w przypadku CSS lub JavaScript jest wymagany? Jeśli to możliwe, może być szybkim przykładem, jak wykonać takie zadanie?

Answer 1

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

Byłoby coś w tej pracy?

Answer 2

myślę coś

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

Answer 3

Daj div ustaloną wysokość i srcoll: hidden; i po najechaniu myszą zmieniamy przewijanie na auto;

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

Oto przykład. http://jsfiddle.net/Lywpk/

Answer 4

Jeżeli jesteś jedyną troską o pokazywanie/ukrywanie, to kod będzie działać dobrze:

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

Jednakże może zmodyfikować niektóre elementy w projekcie, w przypadku korzystania width = 100%, biorąc pod uwagę, że po ukryciu paska przewijania tworzy on trochę więcej miejsca na szerokość.

Answer 5

Odpowiedź ze zmiennym przepełnieniem zawiera szereg problemów, takich jak niespójna szerokość wewnętrznego bloku i wyzwalanie ponownego przepływu.

Jest łatwiejszy sposób, aby mieć taki sam skutek, że nie pociągnie za sobą reflow kiedykolwiek: using visibility mienia i zagnieżdżonych bloków:

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

Oto długopis z przykładu roboczego: http://codepen.io/kizu/pen/OyzGXY

Innym cechą tej metody jest to, że visibility można animować, więc możemy dodać przejście do niej (patrz drugi przykład w pisaku powyżej). Dodanie przejścia byłoby lepsze dla UX: pasek przewijania nie pojawi się natychmiast po ukryciu podczas poruszania się po innym elemencie, a trudniej będzie pominąć pasek przewijania, gdy celuje się w niego kursorem myszy, ponieważ nie będzie się on ukrywał natychmiastowo dobrze.

Answer 6

Jedną z takich sztuczek, w przypadku przeglądarek Webkit, jest utworzenie niewidocznego paska przewijania, a następnie wyświetlenie go po najechaniu myszą. Ta metoda nie ma wpływu na szerokość obszaru przewijania, ponieważ jest tam już miejsce na pasek przewijania.

coś takiego:

.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