CSS webkit scrollbar показать/скрыть

Я использую -webkit-scrollbar, и я хочу, чтобы это была полоса прокрутки, скрытая при загрузке страницы, и она остается скрытой, пока вы не наведете над контейнером div, к которому он привязан. Когда вы нависаете над прокручиваемой областью, он появится.

Я попытался добавить: hover и: focus влияет на различные div и правила в моем CSS без везения.

Есть ли способ сделать то, что я имею в виду, используя -webkit-scrollbar? Я могу опубликовать код, но это довольно просто. Только один внешний div с прикрепленными к нему правилами css, затем один внутренний div с заданной высотой и шириной. Затем правила css для -webkit-scrollbar.

#u #trail ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
#u #trail ::-webkit-scrollbar-button:start:decrement,
#u #trail ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
    background-color: transparent;
}
#u #trail ::-webkit-scrollbar-track-piece {
    background-color: #FAFAFA;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #999;
        -webkit-border-radius: 8px;
}
#u #trail ::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #999;
    -webkit-border-radius: 8px;
}
#u #trail-overflow {
    width: 860px;
    max-height: 500px;
   overflow: auto;
}

Ответ 1

Кажется, я прошел через функцию auto hide в css. Я как-то сделал это в своем приложении и искал, как я его получил. Вот он, модификация существующей скрипты @tim

http://jsfiddle.net/4RSbp/165/

Это трюк:

body {overflow-y:hidden;}
body:hover {overflow-y:scroll;}

Ответ 2

Для этого вы можете использовать простой CSS.

Eg. если у вас есть div #content-wrapper, который прокручивается с помощью background-color: rgb(250, 249, 244);

#content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(250, 249, 244); /* Matches the background color of content-wrapper */
}

#content-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: gray;
}

F.Y.I. Вы можете установить непрозрачность большого пальца на ноль (вместо того, чтобы соответствовать цвету фона), но непрозрачность, похоже, применима и к другим полосам прокрутки на странице.

P.S. Предполагается, что цвет фона ::-webkit-scrollbar-track также соответствует цвету фона #content-wrapper.

Ответ 3

Я закончил работу с плагином javascript slimscroll. Было бы здорово иметь решение all-css, но этот плагин проделан очень хорошо и позволяет отображать фокус-шоу/скрытую идею.

http://rocha.la/jQuery-slimScroll

Ответ 4

см. эту рабочую демонстрацию: http://jsfiddle.net/trpeters1/4RSbp/3/ который был получен отсюда:

http://css-tricks.com/examples/WebKitScrollbars/

Ответ 5

Скрытие scrollthumb в webkit неинтуитивно! Моя страница должна была скрывать все функции прокрутки браузера по умолчанию, чтобы реализовать наши собственные эффекты "бесконечного прокрутки". Единственное, что было тяжело, - это наложение "большого пальца" webkit, которое появляется только во время движения экрана (например, прокрутки с колесиком мыши).

Чтобы скрыть этот прокрутка webkit, нам пришлось применить некоторые стили к "всем" scrollthumbs, а затем применить скрывающие эффекты к моим конкретным большим пальцам (мы должны сделать это программно, потому что мы не уверены, что контент длинный достаточно для выполнения наших специальных эффектов прокрутки до загрузки страницы).

Это стили, которые мы использовали:

::-webkit-scrollbar { /* required, although an apparent no-op */
    color: inherit;
}
::-webkit-scrollbar-thumb { /* leave most bars alone */
    background-color: grey;
}
#customScrollDiv::-webkit-scrollbar-thumb { /* this is the one we care about */
    background-color: grey;
}
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
    display: none; 
}       
.hideThumb { /* required, although an apparent no-op */
    background-color: white;
}

тогда, когда я определяю, что хочу программно скрыть этот thumbHandle, я могу сделать это с помощью jquery: $('#customScrollDiv').toggleClass('hideThumb');

Сложная часть состоит в том, что вам нужно много "дефолтных" стилей CSS, которые вы обычно выходите из коробки, но как только вы начинаете указывать даже один из этих стилей веб-кита выше, вам нужно ИМ ВСЕ, или они не будут применяется.