Как я могу добавить полосу прокрутки к фиксированной боковой панели, которая появляется только при наведении

Question

Как я могу добавить полосу прокрутки к фиксированной боковой панели, которая появляется только при наведении

0

Я работаю над сайтом, на котором я сделал боковую панель, чтобы ее можно было зафиксировать слева и увеличить на всю высоту страницы, используя этот CSS:

sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}

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

Теперь я знаю, что могу добавить полосу прокрутки, используя overflow-y: scroll; но то, что я пытаюсь сделать, это иметь полосу прокрутки, которая появляется только тогда, когда содержимое боковой панели превышает высоту окна и появляется только при наведении. Я также хочу, чтобы полоса прокрутки имела для нее какой-то стиль, подобный боковой панели на боковой панели TheNextWeb или боковой панели Facebook.

Я знаю, что для этого мне нужен JavaScript, но мои навыки в JavaScript очень ограничены, поэтому я ценю любую помощь по этому поводу.

hugo der hungrige 14 нояб. 2013, в 01:43

Источник

Теги:

javascript

jquery

css

1 ответ

Ещё вопросы

hugo der hungrige · Accepted Answer · 2013-11-13T22-10-00.000Z

overflow-y: auto должен работать:

Для стилизации вы, вероятно, должны искать хорошую замену прокрутки, поскольку стиль прокрутки работает только в webkit (http://css-tricks.com/custom-scrollbars-in-webkit/). Это не тривиальная вещь, но, к счастью, есть некоторые плагины:

Просто чтобы упомянуть несколько.

EDIT: Благодаря sheba, я сделал некоторые modfications:

.sidebar:hover{
   overflow-y: scroll;
}

http://codepen.io/johannesjo/pen/GcLFn

Вы также должны установить этот атрибут css, чтобы он появлялся при наведении курсора, сделав siderbar {...} и sidebar: hover {overflow-y: auto; }
Спасибо за помощь, переполнение при наведении работает лучше, теперь мне просто нужно разобраться, чтобы оно не сдвигало мой контент при наведении.