<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>div custom scroll bar for simulation </title>
<style type= "Text/css" >
* {
margin:0;
padding:0;
}
p {
height:1000px;
}
#mainBox {
width:98%;
height:500px;
BORDER:1PX Red Solid;
position:relative;
Overflow:hidden;
margin:50px Auto;
}
#content {height:2500px; position:absolute; left:0; top:0; Background-image:url ();} /* Here you can add a background picture */
. scrolldiv {
width:5px;
Position:absolute;
top:0;
background:red;
border-radius:100px; /* Modify the arc of the scrollbar here */
}
</style>
<body style= "overflow:scroll; overflow-y: Hidden";
<div id= "Mainbox";
<div id= "Content" > </div>
</div>
<p></p>
<script type= "Text/javascript";
var doc = document ;
var _wheeldata =-1;
var mainbox = Doc.getelementbyid (' Mainbox ');
function bind (obj, type, handler) {
var node = typeof obj = = "string"? $ (obj): obj;
if (node.addeventlistener) {
Node.addeventlistener (type, handler, false);
} else if (node.attachevent) {
Node.attachevent (' on ' + type, handler);
} else {
node[' on ' + type] = handler;
}
}
Function MouseWheel (obj, handler) {
var node = typeof obj = = "string"? $ (obj): obj;
Bind (node, ' MouseWheel ', function (event) {
var data =-getwheeldata (event);
Handler (data);
if (document.all) {
Window.event.returnValue = false;
} else {
Event.preventdefault ();
}
});
Firefox
Bind (node, ' Dommousescroll ', function (event) {
var data = Getwheeldata (event);
Handler (data);
Event.preventdefault ();
});
function Getwheeldata (event) {
var e = Event | | window.event;
Return E.wheeldelta? E.wheeldelta:e.detail * 40;
}
}
function Addscroll () {
This.init.apply (this, arguments);
}
Addscroll.prototype = {
Init:function (Mainbox, Contentbox, ClassName) {
var mainbox = Doc.getelementbyid (Mainbox);
var contentbox = Doc.getelementbyid (Contentbox);
var scrolldiv = This._createscroll (Mainbox, className);
This._resizescorll (Scrolldiv, Mainbox, Contentbox);
This._tragscroll (Scrolldiv, Mainbox, Contentbox);
This._wheelchange (Scrolldiv, Mainbox, Contentbox);
This._clickscroll (Scrolldiv, Mainbox, Contentbox);
},
Create scroll bar
_createscroll:function (Mainbox, ClassName) {
var _scrollbox = doc.createelement (' div ')
var _scroll = doc.createelement (' div ');
var span = doc.createelement (' span ');
_scrollbox.appendchild (_scroll);
_scroll.appendchild (span);
_scroll.classname = ClassName;
Mainbox.appendchild (_scrollbox);
return _scroll;
},
Adjust scroll bars
_resizescorll:function (element, Mainbox, Contentbox) {
var p = Element.parentnode;
var conheight = contentbox.offsetheight;
var _width = mainbox.clientwidth;
var _height = mainbox.clientheight;
var _scrollwidth = element.offsetwidth;
var _left = _width-_scrollwidth;
P.style.width = _scrollwidth + "px";
P.style.height = _height + "px";
P.style.left = _left + "px";
P.style.position = "absolute";
P.style.background = "#FFF"; Here you can modify the background color of the scroll bar
ContentBox.style.width = (Mainbox.offsetwidth-_scrollwidth)
+ "px";
var _scrollheight = parseint (_height * (_height/conheight));
if (_scrollheight >= mainbox.clientheight) {
Element.parentNode.style.display = "None";
}
Element.style.height = _scrollheight + "px";
},
Drag the scroll bar
_tragscroll:function (element, Mainbox, Contentbox) {
var mainheight = mainbox.clientheight;
Element.onmousedown = function (event) {
var _this = this;
var _scrolltop = element.offsettop;
var e = Event | | window.event;
var top = E.clienty;
This.onmousemove=scrollgo;
Document.onmousemove = Scrollgo;
Document.onmouseup = function (event) {
This.onmousemove = null;
}
function Scrollgo (event) {
var e = Event | | window.event;
var _top = E.clienty;
var _t = _top-top + _scrolltop;
if (_t > (mainheight-element.offsetheight)) {
_t = Mainheight-element.offsetheight;
}
if (_t <= 0) {
_t = 0;
}
Element.style.top = _t + "px";
ContentBox.style.top =-_t
* (Contentbox.offsetheight/mainbox.offsetheight)
+ "px";
_wheeldata = _t;
}
}
Element.onmouseover = function () {
This.style.background = "#333";
}
Element.onmouseout = function () {
This.style.background = "#666";
}
},
Mouse wheel scrolling, scroll bar scrolling
_wheelchange:function (element, Mainbox, Contentbox) {
var node = typeof Mainbox = = "string"? $ (Mainbox): Mainbox;
var flag = 0, rate = 0, Wheelflag = 0;
if (node) {
MouseWheel (
Node
function (data) {
Wheelflag + = data;
if (_wheeldata >= 0) {
flag = _wheeldata;
Element.style.top = flag + "px";
Wheelflag = _wheeldata * 12;
_wheeldata =-1;
} else {
flag = WHEELFLAG/12;
}
if (flag <= 0) {
Flag = 0;
Wheelflag = 0;
}
if (flag >= (mainbox.offsetheight-element.offsetheight)) {
Flag = (mainbox.clientheight-element.offsetheight);
Wheelflag = (mainbox.clientheight-element.offsetheight) * 12;
}
Element.style.top = flag + "px";
ContentBox.style.top =-flag
* (Contentbox.offsetheight/mainbox.offsetheight)
+ "px";
});
}
},
_clickscroll:function (element, Mainbox, Contentbox) {
var p = Element.parentnode;
P.onclick = function (event) {
var e = Event | | window.event;
var t = E.target | | E.srcelement;
var sTop = document.documentElement.scrollTop > 0? Document.documentElement.scrollTop
: Document.body.scrollTop;
var top = Mainbox.offsettop;
var _top = E.clienty + stop-top-element.offsetheight
/2;
if (_top <= 0) {
_top = 0;
}
if (_top >= (mainbox.clientheight-element.offsetheight)) {
_top = Mainbox.clientheight-element.offsetheight;
}
if (t! = Element) {
Element.style.top = _top + "px";
ContentBox.style.top =-_top
* (Contentbox.offsetheight/mainbox.offsetheight)
+ "px";
_wheeldata = _top;
}
}
}
}
New Addscroll (' Mainbox ', ' content ', ' scrolldiv ');
</script>
</body>
Custom scroll bars for div emulation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
