Example Blog
body {
background-image: url(scrollImages/blog_background.jpg);
background-repeat: no-repeat;
}
#Container {
position: absolute;
top: 60px; left: 60px;
width: 270px; height: 330px;
overflow: hidden;
}
.Scroller-Container { position: absolute; background: transparent; }
h3 {
margin: 0 0 5px 0;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0B6589;
}
p {
margin: 0 0 5px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #054C68;
text-align: justify;
text-indent: 10px;
}
#Scrollbar-Container {
position: absolute;
top: 55px; left: 335px;
width: 10px; height: 340px;
}
.Scrollbar-Track {
width: 10px; height: 340px;
}
.Scrollbar-Handle {
position: absolute;
width: 10px; height: 50px;
background-color: #C6E7F4;
}
#sbLine {
position: absolute;
width: 6px;
height: 5px;
left: 7px;
background-color: #B5D6E3;
font-size: 0px;
}
#List {
position: absolute;
top: 50px; left: 380px;
}
#List a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #7ABAD3;
display: block;
text-decoration: none;
padding: 3px;
}
#List a:hover {
color: #0B6589;
}
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!
function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent('on'+ t, f);
else o['on'+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent('on'+ t, f);
else o['on'+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
};
//Written by Nathan Faubion: http://n-son.com
//Use this or edit how you want, just give me
//some credit!
function jsScrollerTween (o, t, s) {
var self = this;
this._tweenTo = function (y) {
if (self._idle) {
var tHeight = self._parent._src ? self._parent._src.totalHeight : self._parent.totalHeight;
var vHeight = self._parent._src ? self._parent._src.viewableHeight : self._parent.viewableHeight;
var scrollY = self._parent._src ? self._parent._src._y : self._parent._y;
if (y < 0) y = 0;
if (y > tHeight - vHeight) y = tHeight - vHeight;
var dist = y - (-scrollY);
self._inc = 0;
self._timer = null;
self._values = [];
self._idle = false;
for (var i = 0; i < self.steps.length; i++) {
self._values[i] = Math.round((-scrollY) + dist * (self.steps[i] / 100));
}
self._timer = window.setInterval(function () {
self._parent.scrollTo(0, self._values[self._inc]);
if (self._inc == self.steps.length-1) {
window.clearTimeout(self._timer);
self._idle = true;
} else self._inc++;
}, self.stepDelay);
}
};
this._tweenBy = function (y) {
var scrollY = self._parent._src ? self._parent._src._y : self._parent._y;
self._tweenTo(-scrollY + y);
};
this._trackTween = function (e) {
e = e ? e : event;
self._parent.canScroll = false;
var curY = e.clientY + document.body.scrollTop;
self._tweenTo((curY - self._parent._trackTop - self._parent._handleHeight/2) * self._parent._ratio);
};
this.stepDelay = 40;
this.steps = s?s:[0,25,50,70,85,95,97,99,100];
this._values = [];
this._parent = o;
this._timer = [];
this._idle = true;
o.tweenTo = this._tweenTo;
o.tweenBy = this._tweenBy;
o.trackTween = this._trackTween;
if (t) o._scrollTrack = function (e) {
this.trackTween(e);
};
};
window.onload = function () {
scroller = new jsScroller(document.getElementById("Container"), 270, 330);
scrollbar = new jsScrollbar(document.getElementById("Scrollbar-Container"), scroller, true);
scrollTween = new jsScrollerTween(scrollbar, true);
scrollTween.stepDelay = 30;
scrollbar._moveContentOld = scrollbar._moveContent;
scrollbar._moveContent = function () {
this._moveContentOld();
var percent = this._y/(this._trackHeight - this._handleHeight);
document.getElementById("sbLine").style.top = Math.round((this._handleHeight - 5) * percent) +"px";
};
findTags ("h3", document.getElementById("Container"));
}
function findTags (tag, parent) {
var tags = parent.getElementsByTagName(tag);
var cont = document.getElementById("Links");
for (var i = 0; i < tags.length; i++) {
cont.innerHTML += ""+ tags[i].innerHTML +"";
}
}
This Script
Finds all the h3 tags and their position within the container. It then generates tweenTo() links so you can make it scroll to the different title. Pretty cool, huh?
Chicken
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque metus in lectus. Sed sed sapien sed eros rhoncus facilisis. Morbi vestibulum, diam non tincidunt imperdiet, ligula quam lacinia enim, molestie venenatis massa ante a erat. Nunc sed justo quis lorem posuere molestie. Nam eget orci sagittis risus imperdiet aliquet. Nullam est ipsum, sagittis id, varius ac, cursus ut, leo. Morbi ultricies ligula eget massa. Ut sagittis dui ac risus. Phasellus facilisis nunc ac sapien luctus ullamcorper. Nulla ullamcorper lacinia turpis. Maecenas varius. Proin volutpat odio quis nisl. Ut vitae nibh. Cras pharetra placerat mauris. Donec consequat pretium wisi. Suspendisse non eros. Donec pulvinar diam vitae velit. Proin aliquam tortor vel pede faucibus interdum.
Alligator Head
Nam mollis rhoncus purus. Aenean venenatis, nunc et rhoncus sodales, lacus mi malesuada metus, id rhoncus massa pede id mauris. Nullam faucibus. Sed sollicitudin massa id felis. Suspendisse leo quam, laoreet nec, eleifend et, convallis vel, lectus. In nonummy bibendum dui. Quisque ultrices wisi sollicitudin neque. Aenean consectetuer tincidunt tortor. Nulla et elit et nunc facilisis tempus. Nullam nisl augue, varius vel, tincidunt at, volutpat sit amet, justo.
Cah-lee-forn-ee-ya
Suspendisse suscipit pretium libero. Quisque nibh. Donec orci erat, semper at, dictum non, pharetra eu, turpis. Vestibulum dui ante, porttitor commodo, ullamcorper et, pellentesque in, mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eget sem eu metus cursus consequat. Cras tincidunt feugiat sem. Nunc quis ligula eget libero tempus elementum. Ut lacinia. Praesent sit amet nisl nec eros porta ultrices. Sed id felis. Duis tellus. Ut vehicula mi eu diam. In lobortis dignissim wisi. Morbi non felis. In consectetuer elit sit amet urna.
Another One
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque metus in lectus. Sed sed sapien sed eros rhoncus facilisis. Morbi vestibulum, diam non tincidunt imperdiet, ligula quam lacinia enim, molestie venenatis massa ante a erat. Nunc sed justo quis lorem posuere molestie. Nam eget orci sagittis risus imperdiet aliquet. Nullam est ipsum, sagittis id, varius ac, cursus ut, leo. Morbi ultricies ligula eget massa. Ut sagittis dui ac risus. Phasellus facilisis nunc ac sapien luctus ullamcorper. Nulla ullamcorper lacinia turpis. Maecenas varius. Proin volutpat odio quis nisl. Ut vitae nibh. Cras pharetra placerat mauris. Donec consequat pretium wisi. Suspendisse non eros. Donec pulvinar diam vitae velit. Proin aliquam tortor vel pede faucibus interdum.