Scroll DIV in Mozilla
Author
Zhou Renjian
Create@
2005-02-02 17:09
<html>
<head>
<title>324</title>
</head>
<body style="overflow:hidden;">
<div style="width:100%;height:100%;position:absolute;" id="gDimension"></div>
<div id="_inner_scrollbar_" style="position:absolute;left:10px;"></div>
<div id="_c_"
style="background-color:gray;position:absolute;left:700px;top:5px;width:200px;height:500px;overflow:scroll;">
<div style="height:1300px;background-color:#ccccdd;">4023fs<br/>4023fs<br/>4023fs<br/>4023fs<br/>4023fs<br/></div>
</div>
<div
style="background-color:gray;position:absolute;left:160px;top:6px;width:324px;height:253px;overflow:scroll;">
<div style="height:1300px;background-color:#ffccdd;">4023fs<br/>4023fs<br/>4023fs<br/>4023fs<br/>4023fs<br/></div>
</div>
<textarea readonly="readonly" id="_in_" wrap="true" style="position:absolute;left:50px;width:32px;height:100%;">
8a 25 89 2c 66 23 da df f5 bf b1 6b 96 7a 55 73 d6 ae d2 21 f0 db 26 5e 61 9d 73 7a ca 24 53 19 60 bf 59 85 7a 57 17 62 eb 48 0c 31 40 c7 40 7e c5 19 8b 00 99 e4 1d b5 15 f1 4c 04 43 3e fa 3d 2d 9c 98 df 82 ce 3b 61 e1 0b 65 6a 8d a7 5d ed d4 dd d6 2f a0 29 f4 9b db d4 01 b9 b8 b3 f6 7f ab da 76 f6 28 40 bd 7d 32 5c 12 b6 4c 4f 46 f4 1c 6d 41 76 eb 95 be 6c 6f bc a7 13 37 b9 12 44
</textarea>
<script type="text/javascript">
function setScrollTop(el, x) {
if (el.nodeName == "TEXTAREA") {
el.scrollTop = Math.round((el.scrollHeight - el.offsetHeight) * x);
} else {
el.scrollTop = Math.round((el.scrollHeight - el.offsetHeight + 16) * x); // 16: the horizontal scrollbar
}
}
function getScrollTop(el) {
if (el.nodeName == "TEXTAREA") {
return el.scrollTop / (el.scrollHeight - el.offsetHeight);
} else {
return el.scrollTop / (el.scrollHeight - el.offsetHeight + 16); // 16: the horizontal scrollbar
}
}
function initInnerScrollbar(el) {
var _scrollbar_ = document.getElementById("_inner_scrollbar_");
var txt = _scrollbar_.ownerDocument.createElement("TEXTAREA");
txt.id = "_scrollbar_textarea_";
txt.style.position = "absolute";
txt.style.left = "-100px;"
txt.style.width = "32px";
txt.style.height = el.offsetHeight + "px";
txt.style.fontFamily = "Arial, sans-serif";
txt.style.fontSize = "16px";
var txtStr = "";
for (var i = 0; i < Math.round(el.scrollHeight / 19) - 1; i++) {
txtStr += i + "\n";
}
txt.value = txtStr;
_scrollbar_.appendChild(txt);
el.onscroll = function() {
window.status = ":" + Math.random();
var element = document.getElementById("_scrollbar_textarea_");
setScrollTop(element, getScrollTop(_c_));
}
txt.focus();
el.onmouseup = xInnerOnClick;
window.setTimeout("xInnerLoop('" + el.id + "', '_scrollbar_textarea_');", 50);
}
function xInnerLoop(contentID, textareaID) {
window.status = inputFocused; // + ":" + Math.random();
if (inputFocused) {
window.setTimeout("xInnerLoop('" + contentID + "', '" + textareaID + "');", 250);
} else {
var elContent = document.getElementById(contentID);
var elTextarea = document.getElementById(textareaID);
var x = getScrollTop(elTextarea);
if (x != getScrollTop(elContent)) {
setScrollTop(elContent, x);
}
window.setTimeout("xInnerLoop('" + contentID + "', '" + textareaID + "');", 50);
}
}
function xInnerOnClick(e) {
if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") {
inputFocused = false;
document.getElementById("_scrollbar_textarea_").focus();
} else {
inputFocused = true;
}
}
var inputFocused = false;
var _c_ = document.getElementById("_c_");
initInnerScrollbar(_c_);
</script>
</body>
</html>