📄 jsscrollbar.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsScrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url(src/main.css);
</style>
</head>
<body>
<div id="nav">
<h2>Files</h2>
<div><a href="src/jsScrollbar.js" title="jsScrollbar.js">jsScrollbar.js</a></div>
<div><a href="example2.html" title="example 2">example2.html</a></div>
<div><a href="example3.html" title="example 3">example3.html</a></div>
<div><a href="example4.html" title="example 4">example4.html</a></div>
<h2>Related</h2>
<div><a href="jsScroller.html" title="jsScroller">jsScroller</a></div>
<div><a href="jsScrollerTween.html" title="jsScrollerTween">jsScrollerTween</a></div>
<div><a href="index.html" title="Index">Index</a></div>
</div>
<h1>jsScrollbar</h1>
<div id="wrapper">
<h2>Preparation</h2>
<p>Before initializing the scrollbar, you must create a jsScroller object. So if you
haven't, follow the previous tutorial and find out how!</p>
<p>First thing is the HTML:</p>
<pre>
<div id="Scrollbar-Container">
<div class="Scrollbar-Up"></div>
<div class="Scrollbar-Down"></div>
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div>
</div>
</div>
</pre>
<p>Again, "Scrollbar-Container" can be change to anything you want, you just
need to be able reference this element like with jsScroller. The other divs
inside have to have those class names, however. The only ones required for
the scrollbar to work are the track and handle. The up and down buttons are
not necessary. The up, down, and handle buttons can also be images if you desire.</p>
<p>As far as CSS goes, the only things you have to set are the height and
positioning for the track and handle. The track must be absolute or relative,
and the handle must be absolute.</p>
<h2>Constructor</h2>
<pre>new jsScrollbar(jsScroller, scrollbarContainer, auto, eventHandler);</pre>
<p><code>jsScroller</code> is an instance of jsScroller.js, <code>scrollbarContainer</code>
is the element that contains all the components for the scrollbar, <code>auto</code>
is a boolean value that when set to true makes the whole scrollbar disappear when the content
doesn't fill up the whole area and when set to false makes just the handle disappear, and
<code>eventHandler</code> is a function that can change the look fo the scrollbar components
when they are clicked on and such. This will be discussed a little later in the tutorial.</p>
<p>An example of implementation:</p>
<pre>
//You have to have a jsScroller along with the jsScrollbar
var wrapper = document.getElementById("Scroller");
var barWrapper = document.getElementById("Scrollbar-Container");
var scroller = new jsScroller(wrapper, 400, 200);
var scrollbar = new jsScrollbar(scroller, barWrapper, true);
</pre>
<h2>Methods</h2>
<p>This uses the same <code>.scrollTo</code>, <code>.scrollBy</code>, <code>.reset</code>,
and <code>.swapContent</code> functions as jsScroller. They should be used
in place of the jsScroller functions.</p>
<h2>The Event Handler</h2>
<p>The fourth parameter that you can pass to jsScrollbar is a reference to a function
that can change the way the scrollbar looks when its clicked on and such. Two parameters
are passed: the object that generated the action, and the type of action (mouseup, or mousedown).
You could also add your own parameter for getting the event object if you so desire.</p>
<p>An example of an event handler:</p>
<pre>
function scrollbarEvent (o, type) {
if (type == "mousedown") {
//if its the track, make its color #E3E3E3, otherwise make it #BBB
if (o.className == "Scrollbar-Track") {
o.style.backgroundColor = "#E3E3E3";
} else {
o.style.backgroundColor = "#BBB";
}
} else {
//return the colors for when the mouse button is let off
if (o.className == "Scrollbar-Track") {
o.style.backgroundColor = "#EEE";
} else {
o.style.backgroundColor = "#CCC";
}
}
}
</pre>
<p>To pass this to the constructor, just use the function name as a variable name.
So in this case I would pass <code>scrollbarEvent</code> as my fourth argument.</p>
<h2>Examples</h2>
<p><a href="example2.html" title="example 2">example2.html</a>,
<a href="example3.html" title="example 3">example3.html</a>, and
<a href="example4.html" title="example 4">example4.html</a></p>
<h2>Quirks</h2>
<p><s>Using <code>img</code> tags isn't recommended for the scrollbar handle. Most
browsers start their little dragging action, and don't have a way to cancel it like IE does.
I prefer to use divs with a background image.</s></p>
<p><s>Safari selects all the text when trying to drag the handle. I hope someone can enlighten
me and tell me how to fix this!</s></p>
<p>Everythings peachy keen as far as I know!</p>
<h2>Useful Properties</h2>
<p>These are properties that you can access that may help you in making scripts:</p>
<p><code class="bold">.auto, .eventHandler</code></p>
<p>The arguments passed to the constructor. These can be changed at any point if you desire</p>
<p><code class="bold">._up, ._down, ._yTrack, ._yHandle</code></p>
<p>References to the components of the scrollbar.</p>
<p><code class="bold">._disabled</code></p>
<p>A boolean value that sets whether the scrollbar can be clicked on or not. This is automatically
set by the script, but it can be changed at any point if you wish to disable the scrollbar.</p>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -