Jump to content

Customize Horizontal Scrollbar


azzhey

Recommended Posts

:D

I'm trying to create my own style custom horizontal scrollbar...

For I want is change this code to Horizontal Scrolling only,,,,but I can't find to correct these codes

Thanks for any idea!!!

 

Here css code:

body {

background:#eee;

margin:0;

padding:0;

}

 

.example {

-moz-border-radius:3px;

-webkit-border-radius:3px;

background:#FFF;

border:1px #000 solid;

height:600px;

margin:20px auto;

padding:15px;

position:relative;

width:800px;

}

 

#main_content {

height:50%;

left:5%;

overflow:auto;

position:absolute;

top:5%;

width:90%;

}

 

.ssb_down {

background:transparent url(../images/icon-arrow-down.png);

bottom:0;

cursor:pointer;

position:absolute;

right:0;

}

 

.ssb_sb {

background:transparent url(../images/middle.png);

cursor:pointer;

position:absolute;

right:0;

}

 

.ssb_sb_down {

background:transparent url(../images/middrag.png);

}

 

.ssb_sb_over {

background:transparent url(../images/midhover.png);

}

 

.ssb_st {

background:transparent url(../images/back.png);

cursor:pointer;

height:100%;

position:absolute;

right:0;

top:0;

}

 

.ssb_up {

background:transparent url(../images/icon-arrow-up.png);

cursor:pointer;

position:absolute;

right:0;

top:0;

}

 

.parent {

font-family:verdana;

height:100%;

padding:10px;

position:relative;

}

 

Here JS code:

var ssb = {

aConts : [],

mouseY : 0,

N : 0,

asd : 0, /*active scrollbar element*/

sc : 0,

sp : 0,

to : 0,

 

// constructor

scrollbar : function (cont_id) {

var cont = document.getElementById(cont_id);

 

// perform initialization

if (! ssb.init()) return false;

 

var cont_clone = cont.cloneNode(false);

cont_clone.style.overflow = "hidden";

cont.parentNode.appendChild(cont_clone);

cont_clone.appendChild(cont);

cont.style.position = 'absolute';

cont.style.left = cont.style.top = '0px';

cont.style.width = cont.style.height = '100%';

 

// adding new container into array

ssb.aConts[ssb.N++] = cont;

 

cont.sg = false;

 

//creating scrollbar child elements

cont.st = this.create_div('ssb_st', cont, cont_clone);

cont.sb = this.create_div('ssb_sb', cont, cont_clone);

cont.su = this.create_div('ssb_up', cont, cont_clone);

cont.sd = this.create_div('ssb_down', cont, cont_clone);

 

// on mouse down processing

cont.sb.onmousedown = function (e) {

if (! this.cont.sg) {

if (! e) e = window.event;

 

ssb.asd = this.cont;

this.cont.yZ = e.screenY;

this.cont.sZ = cont.scrollTop;

this.cont.sg = true;

 

// new class name

this.className = 'ssb_sb ssb_sb_down';

}

return false;

}

// on mouse down on free track area - move our scroll element too

cont.st.onmousedown = function (e) {

if (! e) e = window.event;

ssb.asd = this.cont;

 

ssb.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

for (var o = this.cont, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;

this.cont.scrollTop = (ssb.mouseY - y - (this.cont.ratio * this.cont.offsetHeight / 2) - this.cont.sw) / this.cont.ratio;

this.cont.sb.onmousedown(e);

}

 

// onmousedown events

cont.su.onmousedown = cont.su.ondblclick = function (e) { ssb.mousedown(this, -1); return false; }

cont.sd.onmousedown = cont.sd.ondblclick = function (e) { ssb.mousedown(this, 1); return false; }

 

//onmouseout events

cont.su.onmouseout = cont.su.onmouseup = ssb.clear;

cont.sd.onmouseout = cont.sd.onmouseup = ssb.clear;

 

// on mouse over - apply custom class name: ssb_sb_over

cont.sb.onmouseover = function (e) {

if (! this.cont.sg) this.className = 'ssb_sb ssb_sb_over';

return false;

}

 

// on mouse out - revert back our usual class name 'ssb_sb'

cont.sb.onmouseout = function (e) {

if (! this.cont.sg) this.className = 'ssb_sb';

return false;

}

 

// onscroll - change positions of scroll element

cont.ssb_onscroll = function () {

this.ratio = (this.offsetHeight - 2 * this.sw) / this.scrollHeight;

this.sb.style.top = Math.floor(this.sw + this.scrollTop * this.ratio) + 'px';

}

 

// scrollbar width

cont.sw = 20;

 

// start scrolling

cont.ssb_onscroll();

ssb.refresh();

 

// binding own onscroll event

cont.onscroll = cont.ssb_onscroll;

return cont;

},

 

// initialization

init : function () {

if (window.oper || (! window.addEventListener && ! window.attachEvent)) { return false; }

 

// temp inner function for event registration

function addEvent (o, e, f) {

if (window.addEventListener) { o.addEventListener(e, f, false); ssb.w3c = true; return true; }

if (window.attachEvent) return o.attachEvent('on' + e, f);

return false;

}

 

// binding events

addEvent(window.document, 'mousemove', ssb.onmousemove);

addEvent(window.document, 'mouseup', ssb.onmouseup);

addEvent(window, 'resize', ssb.refresh);

return true;

},

 

// create and append div finc

create_div : function(c, cont, cont_clone) {

var o = document.createElement('div');

o.cont = cont;

o.className = c;

cont_clone.appendChild(o);

return o;

},

// do clear of controls

clear : function () {

clearTimeout(ssb.to);

ssb.sc = 0;

return false;

},

// refresh scrollbar

refresh : function () {

for (var i = 0, N = ssb.N; i < N; i++) {

var o = ssb.aConts;

o.ssb_onscroll();

o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.sw + 'px';

o.sb.style.height = Math.ceil(Math.max(o.sw * .5, o.ratio * o.offsetHeight) + 1) + 'px';

}

},

// arrow scrolling

arrow_scroll : function () {

if (ssb.sc != 0) {

ssb.asd.scrollTop += 6 * ssb.sc / ssb.asd.ratio;

ssb.to = setTimeout(ssb.arrow_scroll, ssb.sp);

ssb.sp = 32;

}

},

 

/* event binded functions : */

// scroll on mouse down

mousedown : function (o, s) {

if (ssb.sc == 0) {

// new class name

o.cont.sb.className = 'ssb_sb ssb_sb_down';

ssb.asd = o.cont;

ssb.sc = s;

ssb.sp = 400;

ssb.arrow_scroll();

}

},

// on mouseMove binded event

onmousemove : function(e) {

if (! e) e = window.event;

// get vertical mouse position

ssb.mouseY = e.screenY;

if (ssb.asd.sg) ssb.asd.scrollTop = ssb.asd.sZ + (ssb.mouseY - ssb.asd.yZ) / ssb.asd.ratio;

},

// on mouseUp binded event

onmouseup : function (e) {

if (! e) e = window.event;

var tg = (e.target) ? e.target : e.srcElement;

if (ssb.asd && document.releaseCapture) ssb.asd.releaseCapture();

 

// new class name

if (ssb.asd) ssb.asd.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'ssb_sb ssb_sb_over' : 'ssb_sb';

document.onselectstart = '';

ssb.clear();

ssb.asd.sg = false;

}

}

 

window.onload = function() {

ssb.scrollbar('main_content'); // scrollbar initialization

}

 

Here html code:

<div id="main_content">

<iframe src="#.html"scrolling="no"></iframe>

</div>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...