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

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