How to create Scrolbar with in Div? Samples and examples

How to create Scrolbar with in Div?

Using javascript we will create the scrolbar with in Div.
Check the below example.here i called scrolbar() function onmousedown of scroller div.


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>How to create Scrolbar with in DIV</title>
<style type="text/css">
#content {
width:200px;
height:100px;
border:1px solid black;
overflow:hidden
}
#scroller {
position:absolute;
border:1px solid black;
width:15px;
writing-mode:tb-rl;
font-weight:bold;
font-family:arial
}
#outerscroller {
height:100px;
width:25px;
top:15px;
left:209px;
border:1px solid gray;
position:absolute;
overflow:hidden
}
</style>
<script type="text/javascript">
function scrollbar()
 {
var offset = event.clientY - scroller.offsetTop
document.onmousemove=function() {
content.scrollTop=event.clientY-15-offset
scroller.style.top=event.clientY-offset
}
document.onmouseup=function() {
document.onmousemove=null
}
}
</script>
</head>
<body>
<div id="content">
Text 1
<br />Text 2
<br />Text 3
<br />Text 4
<br />Text 5
<br />Text 6
<br />Text 7
<br />Text 8
<br />Text 9
<br />Text 10
<br />Text 11
<br />Text 12
<br />Text 13
<br />Text 14
<br />Text 15
</div>
<div id="outerscroller">
<div id="scroller" onmousedown="scrollbar()">DynamicScroller</div>
</div>
</body>
</html>

Post Comment:

Notify me by email when others post comments to this article.

Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.

No HTML formatting and links to other web sites are allowed.

This is a strictly moderated site. Absolutely no spam allowed.

Name:	Sign In to fill automatically.
Email:	(Will not be published, but required to validate comment)
	Type the numbers and letters shown on the left.

Online Members

How to create Scrolbar with in Div?

Post Comment:

Email subscription