Я работаю над сайтом, на котором я сделал боковую панель, чтобы ее можно было зафиксировать слева и увеличить на всю высоту страницы, используя этот CSS:
sidebar {
position: fixed;
top: 0;
bottom: 0;
}
И это прекрасно работает, чтобы сохранить боковую панель на месте, но проблема в том, что страница переделана на меньшую высоту, вы можете видеть только материал в верхней части боковой панели, и нет возможности увидеть материал внизу боковой панели.
Теперь я знаю, что могу добавить полосу прокрутки, используя overflow-y: scroll;
но то, что я пытаюсь сделать, это иметь полосу прокрутки, которая появляется только тогда, когда содержимое боковой панели превышает высоту окна и появляется только при наведении. Я также хочу, чтобы полоса прокрутки имела для нее какой-то стиль, подобный боковой панели на боковой панели TheNextWeb или боковой панели Facebook.
Я знаю, что для этого мне нужен JavaScript, но мои навыки в JavaScript очень ограничены, поэтому я ценю любую помощь по этому поводу.
overflow-y: auto
должен работать:
Для стилизации вы, вероятно, должны искать хорошую замену прокрутки, поскольку стиль прокрутки работает только в webkit (http://css-tricks.com/custom-scrollbars-in-webkit/). Это не тривиальная вещь, но, к счастью, есть некоторые плагины:
Просто чтобы упомянуть несколько.
EDIT: Благодаря sheba, я сделал некоторые modfications:
.sidebar:hover{
overflow-y: scroll;
}