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

Как создать div блок с прокруткой на JS?
Javascript & jQuery 0    962 0

Здесь Вы можете скачать скрипт для вертикальной прокрутки отдельно взятого DIV блока. Подключив скрипт на свой сайт, - Вы получите следующий результат:

Прокручивающийся DIV

HTML структура прокручивающегося div блока

Сценарий к триллеру

Главный герой просыпается на больничной койке, в психиатрической лечебнице. У него нет никаких воспоминаний о прошлом, он одет в больничную робу, и числиться в больнице как пациент.

Все врачи и весь персонал больницы знает его в лицо, знают его биографию, и историю болезни. Главный герой уверен лишь в одном - он не сумасшедший и его здесь держат силком, а врачи врут ему буквально во всём.

JS скрипт


Инициализация

Функция TINY.scroller.init принимает 5 параметров: id родительского DIV для контента, id DIV контента, id DIV прокрутки, id кнопки прокрутки, класс кнопки прокуртки в активном состоянии (опционально). К выше указанному примеру, код будет таким:


CSS оформление

#wrapper {
    width:400px; 
    height:200px; 
    margin:40px auto; 
    background:#fff; 
    border-top:4px solid #eee; 
    border-left:4px solid #eee; 
    padding:20px
}
#scroll {
    position:relative; 
    width:400px; 
    height:200px; 
    overflow:auto
}
#scrollcontent {
    position:absolute; 
    width:375px; 
    z-index:200
}
#scrollbar {
    float:right; 
    position:relative; 
    display:none; 
    width:15px; 
    height:200px; 
    z-index:100; 
    background:url(images/scroll-bg.gif)
}
.scroller {
    position:absolute; 
    top:0; 
    width:15px; 
    cursor:pointer; 
    background-color:#ccc; 
    background-image:url(images/scroll-arrows.gif); 
    background-position:50% 50%; 
    background-repeat:no-repeat
}
.buttonclick {
    background-color:#bbb
}


Похожие статьи:

Как попросить посетителей своего сайта отключить AdBlock
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Скролинг страницы вверх и вниз по клику на кнопку
Калькулятор расчета стоимости натяжных потолков на jQuery
Parallax эффект для одиночного элемента с библиотекой RELLAX
Плавная прокрутка страницы после нажатия на якорную ссылку
jQuery анимация для сайта - эффекты появления DIV блоков

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte

    Рубрики блога

    Последние комментарии

    Алексей Власов 16 октября 2018, 14:27
    Универсальный и очень простой PHP парсер 10
    Алексей Власов 13 октября 2018, 18:57
    Бесконечное сохранение ресурсов в MODX 2
    Александр Петров 30 сентября 2018, 20:54
    Пишем на SQL без SQL: основы по RedBean PHP 10