Здесь Вы можете скачать скрипт для вертикальной прокрутки отдельно взятого DIV блока. Подключив скрипт на свой сайт, — Вы получите следующий результат:
HTML структура прокручивающегося div блока
<div id="wrapper"> <div id="scroll"> <div id="scrollcontent"> <h1>Сценарий к триллеру</h1> <p>Главный герой просыпается на больничной койке, в психиатрической лечебнице. У него нет никаких воспоминаний о прошлом, он одет в больничную робу, и числиться в больнице как пациент.</p> <p>Все врачи и весь персонал больницы знает его в лицо, знают его биографию, и историю болезни. Главный герой уверен лишь в одном - он не сумасшедший и его здесь держат силком, а врачи врут ему буквально во всём. </p> </div> <div id="scrollbar"> <div id="scroller" class="scroller"></div> </div> </div> </div>
JS скрипт
<script type="text/javascript"> var TINY={}; function T$(id){return document.getElementById(id)} function T$$$(){return document.all?1:0} TINY.scroller=function(){ return{ init:function(a,c,b,s,d){ a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0; b.style.display='block'; a.style.overflow='hidden'; var h=a.offsetHeight, t=c.offsetHeight; if(t<h){ b.style.display='none' }else{ a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0; s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false}; s.onselectstart=function(){return false} } a.l=b.offsetHeight-s.offsetHeight }, st:function(e,f){ var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top); if(a.mv){this.sp(f)} a.mv=function(event){TINY.scroller.mv(event,f)}; a.sp=function(){TINY.scroller.sp(f)}; if(T$$$()){ document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp) }else{ document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1) } if(a.d){s.className+=' '+a.n} }, mv:function(e,f){ var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c); if(m>=0&&m<a.l){ s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px' }else if(m<0){ s.style.top=0; c.style.top=0 }else if(m>a.l){ s.style.top=a.l+'px'; c.style.top=a.m+'px' } }, sp:function(f){ var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')} if(T$$$()){ document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp) }else{ document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1) } a.mv=0; } } }(); TINY.cursor=function(){ return{ top:function(e){ return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY } } }(); </script>
Инициализация
Функция TINY.scroller.init принимает 5 параметров: id родительского DIV для контента, id DIV контента, id DIV прокрутки, id кнопки прокрутки, класс кнопки прокуртки в активном состоянии (опционально).
К выше указанному примеру, код будет таким:
<script type="text/jаvascript"> TINY.scroller.init('scroll','scrollcontent','scrollbar','scroller','buttonclick'); </script>
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 }