Как создать div блок с прокруткой?

голоса: 0

Есть блок с информером объявлений. Помогите сделать Div со скролингом. В интернете много вариантов, но там полоса прокрутки толстая, а нужно современный тонкий дизайн. Вот один из вариантов но он не подходит ВАРИАНТ

| Автор: | Категория: Дизайн сайта
Вариант вообще без полос прокрутки, не судить строго сам долго искал в сети, из прочитанного слепил такой код:

HTML:

<div class="boxnews">

<div class="box-scrollnews"> Содержимое блока </div>

</div>

CSS:

.boxnews {
 width: 100%;
 height: 250px;
 overflow: hidden;
}
.box-scrollnews {
 width: 100%;
 height: 100%;
 padding: 0 25px 0 0;
 overflow: auto;
}
Kid Morbid,
Этот вариант тоже хорош) Совмещаю два варианта

Ответов: 1

голоса: +2
 
Лучший ответ

Создаем блок, например вот так:

<div class="bl-scroll">содержимое блока</div>

стили:

.bl-scroll {
    width: 280px;
    max-height: 400px; /*Высота блока после которой начнется прокрутка*/
    display: inline-block;
    overflow-x: hidden; /*непосредственно прокрутка*/
    margin: 0 -3px;
    padding-top: 1px;
}

тонкий скрол делаем стилями, например:

#body{}
::-webkit-scrollbar
{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece
{
background-color: #ffffff;
}
::-webkit-scrollbar-thumb:vertical
{
height: 5px;
background-color: #096BAA;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #096BAA;
}

где цвет #096BAA настраиваем под нужный цвет полоски скрола.

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
Спасибо, сейчас попробую
Всё работает, подскажите что прописать что бы скролинг работал при наведении? Скрипт наверно?
В браузере мозила, сама полоса стандартная, подскажите что подписать для браузера мозила?
Руслан Алексеев,

Для мозили прописать что-то вида:

::-moz-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #096BAA;
}
Yuri_Geruk,
точно также к каждому классу? У браузера тоже скролинг изменнился, а можно что бы только у отдельного блока?
Руслан Алексеев,

Прочтите материал о вендорных префиксах для браузеров - http://www.xiper.net/learn/css/properties/vendor-prefix.html надеюсь разберетесь.

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

.classname::-moz-scrollbar-thumb:horizontal {здесь стили}
Yuri_Geruk,
Спасибо) Пробую)
Yuri_Geruk,

для мозилы не работает 

 

.bl-scroll::-webkit-scrollbar{width: 5px;height: 5px;}
 .bl-scroll::-webkit-scrollbar-track-piece{background-color: #ffffff;}
 .bl-scroll::-webkit-scrollbar-thumb:vertical{height: 5px;background-color: #096BAA;}
 .bl-scroll::-webkit-scrollbar-thumb:horizontal{width: 5px;background-color: #096BAA;}
 .bl-scroll::-moz-scrollbar{width: 5px;height: 5px;}
 .bl-scroll::-moz-scrollbar-track-piece{background-color: #ffffff;}
 .bl-scroll::-moz-scrollbar-thumb:vertical{height: 5px;background-color: #096BAA;}
 .bl-scroll::-moz-scrollbar-thumb:horizontal{width: 5px;background-color: #096BAA;}  

 

...