正在尝试查找javascript元素's在屏幕上的位置..在webkit浏览器上无法正常工作
Trying to find javascript element's position on screen....Not working properly on webkit browsers
这是我现在使用的代码。在webkit浏览器(Chrome和Safari)上,如果页面被滚动,则不会考虑页面的滚动量。我需要帮助重新设计该功能以适用于Webkit浏览器。我不想加载jQuery,因为它将用于web小部件,我需要降低文件大小。谢谢大家!
function __getIEVersion() {
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}['.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
function __getOperaVersion() {
var rv = 0; // Default value
if (window.opera) {
var sver = window.opera.version();
rv = parseFloat(sver);
}
return rv;
}
var __userAgent = navigator.userAgent;
var __isIE = navigator.appVersion.match(/MSIE/) != null;
var __IEVersion = __getIEVersion();
var __isIENew = __isIE && __IEVersion >= 8;
var __isIEOld = __isIE && !__isIENew;
var __isFireFox = __userAgent.match(/firefox/i) != null;
var __isFireFoxOld = __isFireFox && ((__userAgent.match(/firefox'/2./i) != null) ||
(__userAgent.match(/firefox'/1./i) != null));
var __isFireFoxNew = __isFireFox && !__isFireFoxOld;
var __isWebKit = navigator.appVersion.match(/WebKit/) != null;
var __isChrome = navigator.appVersion.match(/Chrome/) != null;
var __isOpera = window.opera != null;
var __operaVersion = __getOperaVersion();
var __isOperaOld = __isOpera && (__operaVersion < 10);
function __parseBorderWidth(width) {
var res = 0;
if (typeof(width) == "string" && width != null && width != "" ) {
var p = width.indexOf("px");
if (p >= 0) {
res = parseInt(width.substring(0, p));
}
else {
//do not know how to calculate other values
//(such as 0.5em or 0.1cm) correctly now
//so just set the width to 1 pixel
res = 1;
}
}
return res;
}
//returns border width for some element
function __getBorderWidth(element) {
var res = new Object();
res.left = 0; res.top = 0; res.right = 0; res.bottom = 0;
if (window.getComputedStyle) {
//for Firefox
var elStyle = window.getComputedStyle(element, null);
res.left = parseInt(elStyle.borderLeftWidth.slice(0, -2));
res.top = parseInt(elStyle.borderTopWidth.slice(0, -2));
res.right = parseInt(elStyle.borderRightWidth.slice(0, -2));
res.bottom = parseInt(elStyle.borderBottomWidth.slice(0, -2));
}
else {
//for other browsers
res.left = __parseBorderWidth(element.style.borderLeftWidth);
res.top = __parseBorderWidth(element.style.borderTopWidth);
res.right = __parseBorderWidth(element.style.borderRightWidth);
res.bottom = __parseBorderWidth(element.style.borderBottomWidth);
}
return res;
}
//returns the absolute position of some element within document
function getElementAbsolutePos(element) {
var res = new Object();
res.x = 0; res.y = 0;
if (element !== null) {
if (element.getBoundingClientRect) {
var viewportElement = document.documentElement;
var box = element.getBoundingClientRect();
var scrollLeft = viewportElement.scrollLeft;
var scrollTop = viewportElement.scrollTop;
res.x = box.left + scrollLeft;
res.y = box.top + scrollTop;
}
else { //for old browsers
res.x = element.offsetLeft;
res.y = element.offsetTop;
var parentNode = element.parentNode;
var borderWidth = null;
while (offsetParent != null) {
res.x += offsetParent.offsetLeft;
res.y += offsetParent.offsetTop;
var parentTagName =
offsetParent.tagName.toLowerCase();
if ((__isIEOld && parentTagName != "table") ||
((__isFireFoxNew || __isChrome) &&
parentTagName == "td")) {
borderWidth = kGetBorderWidth
(offsetParent);
res.x += borderWidth.left;
res.y += borderWidth.top;
}
if (offsetParent != document.body &&
offsetParent != document.documentElement) {
res.x -= offsetParent.scrollLeft;
res.y -= offsetParent.scrollTop;
}
//next lines are necessary to fix the problem
//with offsetParent
if (!__isIE && !__isOperaOld || __isIENew) {
while (offsetParent != parentNode &&
parentNode !== null) {
res.x -= parentNode.scrollLeft;
res.y -= parentNode.scrollTop;
if (__isFireFoxOld || __isWebKit)
{
borderWidth =
kGetBorderWidth(parentNode);
res.x += borderWidth.left;
res.y += borderWidth.top;
}
parentNode = parentNode.parentNode;
}
}
parentNode = offsetParent.parentNode;
offsetParent = offsetParent.offsetParent;
}
}
}
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return res;
}
if (element.getBoundingClientRect) { var viewportElement = document.documentElement; var box = element.getBoundingClientRect(); var scrollLeft = viewportElement.scrollLeft; var scrollTop = viewportElement.scrollTop; res.x = box.left + scrollLeft; res.y = box.top + scrollTop; }
我担心这个代码块只使用一种方法来检测滚动位置。我会将代码的底部块移到函数的顶部,并使用scrOfX/Y而不是scrollLeft和scrollTop。
相关文章:
- setInterval 在 webkit 浏览器中的行为很奇怪
- 有什么技巧可以让vw调整大小以在webkit浏览器上的:before伪类上工作吗
- 问题以在webkit浏览器中对数组进行排序
- webkit浏览器中的复选框问题
- 在非WebKit浏览器中延迟JavaScript执行
- 如何使用webkit浏览器在一个范围内选择一个节点
- 有效的网页显示在WebKit浏览器和IE中,但不显示在Firefox中
- Webkit 和 Moz Transform,具体取决于浏览器
- jQuery Ajax 调用在 WebKit 浏览器中不起作用
- 如何在单击 Webkit 通知时从浏览器中的任何其他选项卡移回当前选项卡
- jQuery 脚本在 webkit 浏览器上不起作用
- Webkit 似乎不支持层上的 $.focus(),而 IE9 支持.无论如何,让webkit浏览器也这样做
- 如何从node-webkit应用程序打开浏览器窗口
- JavaScript 动画在 iOS Safari Webkit 浏览器中停止,当手指在屏幕上而不抬起时
- 有没有办法在基于 webkit 的浏览器中强制使用 Javascript 垃圾收集器
- 在javascript中检测webkit浏览器
- 正在尝试查找javascript元素's在屏幕上的位置..在webkit浏览器上无法正常工作
- lib's适用于所有浏览器webkit支持
- node-webkit与chrome浏览器中应用程序的性能
- node-webkit右键单击链接并在默认浏览器中打开