JavaScript scroll

deam0n · #1 (**permalink**) 05-22-2007, 11:33 AM

Here is a very nice script for JavaScript scroll:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JavaScript Scroll</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body, html {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 11px;
}
div#scroll {
width: 200px;
height: 200px;
overflow: hidden;
text-align: justify;
border: 1px dotted black;
}
div.copyleft {
font-size: 10px;
font-family: arial;
}
</style>
<script type="text/javascript">
var status = "out";
function mouse_over() {
status = "over"
}
function mouse_out() {
status = "out"
}
function scroll_div(direction, speed) {
var obj = document.getElementById('scroll');
switch(direction) {
case "up":
obj.scrollTop += speed;
if(status == "over") {
setTimeout("scroll_div('up',"+speed+");", 1);
}
document.getElementById("status").innerHTML = obj.scrollTop + "/" + obj.scrollHeight
break;

case "down":
obj.scrollTop -= speed;
if(status == "over") {
setTimeout("scroll_div('down',"+speed+");", 1);
document.getElementById("status").innerHTML = obj.scrollTop + "/" + obj.scrollHeight
}
break;
}
}
</script>
</head>
<body>
<center>
<br />
<br />
<div id="scroll">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque posuere dui non purus. Nunc porta nisi et velit. Quisque magna. Fusce sed eros et odio tempor aliquam. Donec quis sapien eu magna congue congue. Nunc ultrices mi. Cras mi elit, luctus ut, convallis et, tincidunt sit amet, erat. Vestibulum sed nisl vel eros ultricies volutpat. Curabitur condimentum sem porta eros. Integer ut mauris eu neque sagittis facilisis.
Mauris a dui a risus ultricies fermentum. Proin condimentum rutrum tortor. Morbi ornare cursus diam. Praesent varius sagittis elit. Pellentesque non augue vitae arcu congue aliquam. Cras nisl ipsum, sagittis eu, vestibulum eu, imperdiet ac, justo. Maecenas adipiscing lobortis tellus. Integer in eros. Integer suscipit. Nam nec ipsum vitae est aliquet posuere. Vestibulum imperdiet sapien lacinia ligula mattis consequat. Vivamus nisl tellus, tempus non, ultricies eu, euismod eget, leo. Praesent magna sapien, hendrerit sed, accumsan at, tristique vel, mauris. Pellentesque et eros a lacus molestie ultrices. Donec congue dapibus libero. Mauris at velit quis nisi eleifend rutrum. Vestibulum pharetra nunc nec velit. Duis mi diam, ultricies non, ullamcorper non, condimentum ut, metus. Phasellus quis orci et metus mattis sagittis. Aenean fermentum, nibh ac volutpat fermentum, diam leo aliquet lorem, hendrerit volutpat diam neque vel purus.
Nam ornare libero eget eros. Phasellus dolor massa, fringilla ut, molestie a, sollicitudin et, arcu. Sed magna ipsum, semper a, euismod ut, luctus sit amet, mauris. Nullam sit amet tortor. Maecenas rutrum dapibus felis. In cursus, nisl id mollis hendrerit, quam felis pretium mauris, quis gravida odio sem quis dui. Etiam sed arcu. Sed urna nisl, eleifend et, porta id, laoreet vel, odio. Pellentesque dignissim commodo risus. Sed ullamcorper nonummy odio. Nullam id purus quis augue convallis tincidunt. Integer at pede. Nullam facilisis aliquet nunc. Quisque egestas mi sed urna vestibulum molestie. Cras non erat. Donec justo nisi, dignissim sit amet, aliquet vel, condimentum eu, lectus. Nullam nec est sit amet enim iaculis iaculis. Nulla sapien. In hac habitasse platea dictumst.
</div>
<br />
<a href="javascript: ;" onmouseover="mouse_over(); scroll_div('up', 1);" onmouseout="mouse_out();">Up</a>
|
<a href="javascript: ;" onmouseover="mouse_over(); scroll_div('down', 1);" onmouseout="mouse_out();">Down</a>
<br />
<div id="status">&nbsp;</div>

<br />
<br />

<div class="copyleft">Copyleft 2007 deam0n.eu</div>
</center>
</body>
</html>