nicht angemeldet
Hallo,
Och, Mist! Ein iframe wollte ich ja eigentlich vermeiden. Mal blöd gefragt: Warum gibts denn diese Funktionen für divs nicht?
Weil ich Zeit hatte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scrollbares DIV mit Spezialscrollern ;-)</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#container {width:300px; height:200px; margin:auto; background-color:#007070;}
#scrolldiv {width:100%; height:100%; background-color:#00AFAF; overflow:auto;}
</style>
<script type="text/javascript">
<!--
function init() {
var myScrollDiv = document.getElementById("scrolldiv");
myScrollDiv.style.overflow = "hidden";
myScrollDiv.style.width = "280px";
var myContainer = document.getElementById("container");
myContainer.style.position = "relative";
var bUp = document.createElement("BUTTON");
bUp.appendChild(document.createTextNode("U"));
bUp.style.width = "20px";
bUp.style.height = "20px";
bUp.style.position = "absolute";
bUp.style.top = "0";
bUp.style.right = "0";
bUp.style.padding = "0";
bUp.onmouseover = up;
bUp.onmouseout = stop;
var bDown = document.createElement("BUTTON");
bDown.appendChild(document.createTextNode("D"));
bDown.style.width = "20px";
bDown.style.height = "20px";
bDown.style.position = "absolute";
bDown.style.bottom = "0";
bDown.style.right = "0";
bDown.style.padding = "0";
bDown.onmouseover = down;
bDown.onmouseout = stop;
var bNorm = document.createElement("BUTTON");
bNorm.appendChild(document.createTextNode("N"));
bNorm.style.width = "20px";
bNorm.style.height = "20px";
bNorm.style.position = "absolute";
bNorm.style.top = "50%";
bNorm.style.marginTop = "-10px";
bNorm.style.right = "0";
bNorm.style.padding = "0";
bNorm.onclick = deinit;
myContainer.appendChild(bUp);
myContainer.appendChild(bDown);
myContainer.appendChild(bNorm);
}
function deinit() {
var myScrollDiv = document.getElementById("scrolldiv");
myScrollDiv.style.overflow = "";
myScrollDiv.style.width = "";
var myContainer = document.getElementById("container");
myContainer.style.position = "";
var myButtons = myContainer.getElementsByTagName("BUTTON");
while (myButtons.length > 0) {
myContainer.removeChild(myButtons[0]);
}
}
function down() {
var myScrollDiv = document.getElementById("scrolldiv");
myScrollDiv.scrollTop += 1;
myScrollDiv.scr = window.setTimeout("down()", 10);
//Testausgabe von scrollTop
var myMonitor = document.getElementById("monitor");
myMonitor.innerHTML = myScrollDiv.scrollTop;
}
function up() {
var myScrollDiv = document.getElementById("scrolldiv");
myScrollDiv.scrollTop -= 1;
myScrollDiv.scr = window.setTimeout("up()", 10);
//Testausgabe von scrollTop
var myMonitor = document.getElementById("monitor");
myMonitor.innerHTML = myScrollDiv.scrollTop;
}
function stop() {
var myScrollDiv = document.getElementById("scrolldiv");
window.clearTimeout(myScrollDiv.scr);
}
window.onload = init;
//-->
</script>
</head>
<body>
<div id="container">
<div id="scrolldiv">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo neque, ultrices id, venenatis ut, interdum sit amet, ante. Suspendisse sapien lorem, ornare at, iaculis eu, pellentesque eu, leo. Donec mi elit, interdum sit amet, ornare vel, porttitor sit amet, sapien. Nunc urna lacus, imperdiet vel, imperdiet non, placerat eu, felis. Donec sapien. Donec porta magna ac nibh. Aliquam sagittis sem non sapien. Suspendisse aliquet erat id eros. Cras tincidunt ornare est. Vivamus mattis eros ac tellus. Etiam commodo eros ac risus pellentesque facilisis. Ut tincidunt. Pellentesque feugiat sapien in quam. Suspendisse potenti. Suspendisse potenti. In hac habitasse platea dictumst. Suspendisse ullamcorper nibh. Nulla facilisi.</p>
<p>Curabitur at leo vel leo euismod ultricies. Aliquam posuere viverra tellus. Donec tincidunt elementum eros. Nulla aliquet nulla non justo dignissim aliquam. Morbi eget dui eu tortor tempus malesuada. Sed a urna et arcu luctus ornare. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam consequat sollicitudin justo. Praesent velit. Donec consequat, sapien quis dignissim egestas, nibh sem mollis dolor, ac scelerisque nisl lorem vel massa. Nulla facilisi. Duis vulputate, orci sit amet euismod tincidunt, risus tortor pulvinar arcu, eleifend mollis augue pede id nibh. Aenean eu nibh et ligula sagittis iaculis. Nunc metus arcu, venenatis sed, semper et, dapibus sit amet, justo. Donec faucibus, quam nec feugiat placerat, lorem metus mattis dui, in malesuada ante velit eget ante. Duis sollicitudin magna at felis. Etiam augue eros, viverra nec, scelerisque eu, volutpat blandit, elit. Duis commodo nulla eget turpis.</p>
</div>
</div>
<div id="monitor"> </div>
</body>
</html>
Interessant ist das Verhalten von DIV.scrollTop, weil es durch inkrementieren bzw. dekrementieren offensichtlich nicht kleiner als 0 bzw. größer als Maximum werden kann.
Getestet ist das im jeweils aktuellsten IE (IE6), FF und Opera unter Windows.
viele Grüße
Axel
Gunnar Bittersmann