<html>
<head>
<style type="text/css">
#divTest{ width:120px; height:250px;border:1px solid #CC6600; background-color:#FFFFCC; overflow:auto;}
body{margin:0px;padding:0px}
</style>
<script language="JavaScript">
<!--
var $ = document.getElementById;
function addContent(){
$("divTest").innerHTML += "asdfasdfasdfasdfasdfasdf<BR>";
}
function isOnScrollBar(){
}
function getPosition(obj) {
var top=0;
var left=0;
var width=obj.clientWidth;
var height=obj.clientHeight;
while (obj.offsetParent) {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
return {"top":top,"left":left,"width":width,"height":height};
}window.onload = function(){
var d = $("divTest");
var o = getPosition(d);
var left= o.left+parseInt(d.currentStyle.borderLeftWidth)+parseInt(d.currentStyle.paddingLeft);
var top =o.top+parseInt(d.currentStyle.borderTopWidth)+ parseInt(d.currentStyle.paddingTop );
$("divTest").onmousemove = function(){
var cw = this.clientWidth;
var ch = this.clientHeight;
var e = window.event;
var x = e.x;
var y = e.y; if(left+cw < x){
out("x=",x," y=",y," clientWidth:",cw," clientHeight:",ch,"在竖滚动条上");
return;}
if(top+ch<y){
out("x=",x," y=",y," clientWidth:",cw," clientHeight:",ch,"在横滚动条上");
return;}
out("x=",x," y=",y," clientWidth:",cw," clientHeight:",ch,"不在滚动条上");
};
$("divSt").innerHTML = "left:" + left + " top:" + top + " width:"+o.width+" height:"+o.height;
$("divSt").innerHTML += " scrollWidth:"+d.scrollWidth+ " scrollHeight:" + d.scrollHeight;
$("btnAdd").onclick = addContent;
};
function out(){
var ar = [];
for(var i=0;i<arguments.length;i++)
ar.push(arguments[i]);
ar.push("<BR>");
var div = $("divOut");
div.innerHTML = ar.join("") + div.innerHTML;
//$("divOut").scrollTop=888888;
}
//-->
</script></head>
<body>
<div id="divTest"></div>
<input type="button" value="Add" id="btnAdd">
<div id="divSt" style="width:100%;"></div>
<div id="divOut" style="width:100%;"></div>
</body>
</html>目前的结果有一个像素的偏差,但我不知道在哪里.在IE下基本可以找到位置了
<head>
<style type="text/css">
#divTest{ width:120px; height:250px;border:1px solid #CC6600; background-color:#FFFFCC; overflow:auto;}
body{margin:0px;padding:0px}
</style>
<script language="JavaScript">
<!--
var $ = document.getElementById;
function addContent(){
$("divTest").innerHTML += "asdfasdfasdfasdfasdfasdf<BR>";
}
function isOnScrollBar(){
}
function getPosition(obj) {
var top=0;
var left=0;
var width=obj.clientWidth;
var height=obj.clientHeight;
while (obj.offsetParent) {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
return {"top":top,"left":left,"width":width,"height":height};
}window.onload = function(){
var d = $("divTest");
var o = getPosition(d);
var left= o.left+parseInt(d.currentStyle.borderLeftWidth)+parseInt(d.currentStyle.paddingLeft);
var top =o.top+parseInt(d.currentStyle.borderTopWidth)+ parseInt(d.currentStyle.paddingTop );
$("divTest").onmousemove = function(){
var cw = this.clientWidth;
var ch = this.clientHeight;
var e = window.event;
var x = e.x;
var y = e.y; if(left+cw < x){
out("x=",x," y=",y," clientWidth:",cw," clientHeight:",ch,"在竖滚动条上");
return;}
if(top+ch<y){
out("x=",x," y=",y," clientWidth:",cw," clientHeight:",ch,"在横滚动条上");
return;}
out("x=",x," y=",y," clientWidth:",cw," clientHeight:",ch,"不在滚动条上");
};
$("divSt").innerHTML = "left:" + left + " top:" + top + " width:"+o.width+" height:"+o.height;
$("divSt").innerHTML += " scrollWidth:"+d.scrollWidth+ " scrollHeight:" + d.scrollHeight;
$("btnAdd").onclick = addContent;
};
function out(){
var ar = [];
for(var i=0;i<arguments.length;i++)
ar.push(arguments[i]);
ar.push("<BR>");
var div = $("divOut");
div.innerHTML = ar.join("") + div.innerHTML;
//$("divOut").scrollTop=888888;
}
//-->
</script></head>
<body>
<div id="divTest"></div>
<input type="button" value="Add" id="btnAdd">
<div id="divSt" style="width:100%;"></div>
<div id="divOut" style="width:100%;"></div>
</body>
</html>目前的结果有一个像素的偏差,但我不知道在哪里.在IE下基本可以找到位置了
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货