Question

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

Comments

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

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,

Этот вариант тоже хорош) Совмещаю два варианта

Answer 1

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

<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 настраиваем под нужный цвет полоски скрола.

Comments

Спасибо, сейчас попробую

---

Всё работает, подскажите что прописать что бы скролинг работал при наведении? Скрипт наверно?

---

В браузере мозила, сама полоса стандартная, подскажите что подписать для браузера мозила?

---

Руслан Алексеев,

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

::-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;}