Как создать div блок с прокруткой на JS?
Здесь Вы можете скачать скрипт для вертикальной прокрутки отдельно взятого 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
}
Комментарии ()