`

关于不同浏览器对$(obj).offset()取值不一致的解决方法

阅读更多

在测试中发现,JQuery中的$(obj).offset().top 在不同浏览器中获取的高度不同

此处以<body>中的一个<div id="content"></div>为例

1.正常情况下,$("#content") 距离页面顶部的距离应该为0,页面初始化后,所有浏览器中的 $("#content" ).offset().top 的值都为0。

2.但是如果将页面向下滚动一段距离后,不同的浏览器之间则会出现两种情况:

  • 一种依然为“0”,即距页面顶端距离。( 如 IE10,Firefox17)
  • 另一种则为“-$("html,body").scrollTop()”,即距可视窗口顶端距离。如(Chrome23,IE7)        

所以当需要从任意位置平滑滚动到某一元素时,对 $(obj).offset() 的取值不一致会使滚动结果截然不同,因此可以根据以上结果做出判断,以确定是否需要在获取元素的offset后加上滚动条位置(“$("html,body").scrollTop()”)。

总结:

获取元素距离页面顶端高度

  • 当 offset() 获取的是距页面顶端距离时: $("#content" ).offset().top;
  • 当 offset() 获取的是距窗口顶端距离时: $("#content" ).offset().top + $("html,body").scrollTop();

另一种通用方法:

function pageX(elem) 
{
	return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
	
function pageY(elem) 
{
        return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}

 

 

分享到:
评论

相关推荐

    仿优酷wap苹果cmsv10手机模板.zip

    仿优酷wap苹果cmsv10 仿优酷模板,仿的非常精细,带WAP模板,所有功能跟页面都非常完整,相当推荐的一款模板。

    Jquery实现$.fn.extend和$.extend函数_.docx

    在JavaScript中,jQuery库提供了两种扩展对象的方法,即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能,但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先,`$.fn.extend`是用于...

    rvt2obj_revit导出_revit生成obj_revitobj_rvt2obj_obj.zip

    标题中的“rvt2obj”指的是一个转换工具,它能够将Revit文件(.rvt格式)转换为OBJ格式。Revit是Autodesk公司开发的一款专业建筑信息模型(BIM)软件,广泛应用于建筑设计、结构工程和MEP工程等领域。OBJ是一种通用...

    ExportOBJ.rar

    标题“ExportOBJ.rar”指的是一个压缩包文件,其中包含了用于导出Revit模型为OBJ格式的工具或代码。这个过程通常涉及到几个步骤,包括解压缩、编译、添加到Revit插件以及执行导出操作。 1. **解压**:首先,用户...

    Jquery实现$.fn.extend和$.extend函数

    在jQuery库中,`$.fn.extend` 和 `$.extend` 是两个非常重要的功能,它们用于扩展jQuery的功能和对象。这两个函数虽然名字相似,但作用却截然不同。 首先,`$.fn.extend` 是用于扩展jQuery选择器对象的方法。当你...

    angularJS 发起$http.post和$http.get请求的实现方法

    一种解决方案是在应用配置阶段设置全局默认值: ```javascript var myApp = angular.module('app', []); myApp.config(function($httpProvider) { $httpProvider.defaults.transformRequest = function(obj) { ...

    jQuery 1.5 API 中文版

    $.offset( coord ), .offset( fn( index, coord ) ) $.offsetParent( ) obj.position( ) int.scrollTop( ) $.scrollTop( val ) int.scrollLeft( ) $.scrollLeft( val ) Height and Width int.height( ) $.height( ...

    OBJ.rar_ obj.rar _obj_obj load_obj模型_读取obj

    《深入理解OBJ模型加载与解析》 在计算机图形学领域,模型文件格式是至关重要的,它们用于存储3D模型的数据,使得这些模型能在各种应用程序中使用。其中,`.obj`格式是一种广泛使用的开放格式,由Wavefront ...

    大漠类库生成工具v24.0能够生成各语言调用大漠的类库。如易语言的obj.txt

    大漠类库生成工具v24.0 能够生成各语言调用大漠的类库。如易语言的obj.txt 工具用法:选择好dm.dll所在的目录后。点击生成。会在dm.dll目录下生成一个Output文件夹。里面包含了各语言调用的类库。

    load_obj.zip

    此外,为了确保在不同浏览器和设备上的兼容性,开发者可能还需要考虑使用跨浏览器的解决方案,比如适配不同的WebGL版本,以及优化性能以适应移动设备。加载和渲染大模型时,可能还需要实施分块加载或 LOD(Level of ...

    win64 OBJ 3D 文件浏览器

    "win64 OBJ 3D 文件浏览器"是一个专为64位Windows操作系统设计的应用程序,其核心功能是浏览和查看.OBJ格式的3D模型文件。.OBJ是一种广泛使用的3D模型文件格式,由Wavefront Technologies公司开发,常用于计算机图形...

    main.OBJ.obj

    main.OBJ.obj

    STARTUP.OBJ.obj

    STARTUP.OBJ.obj

    PyPI 官网下载 | obj.irc-16.tar.gz

    这意味着`obj.irc-16`可能包含与Zookeeper交互的模块或功能,帮助开发者在Python应用中实现对Zookeeper的操作。 2. **分布式**:这表明该库设计用于处理分布式系统中的问题,可能是为了在多节点环境中进行通信、...

    批量导入OBJ.mse

    可以使得3dmax批量导入obj实现批量化,很好,好小巧的3dmax插件。

    js中事件的处理与浏览器对象示例介绍.docx

    JavaScript中的事件处理是Web开发中的核心概念,它允许用户与网页进行交互。在这个示例中,我们看到两种主要的事件处理...同时,掌握不同浏览器对象的方法和属性,有助于实现更高级的功能,如页面间通信和状态管理。

    深入理解Angularjs中$http.post与$.post

    在AngularJS中,`$http.post` 和 jQuery 的 `$.post` 都是用来发送HTTP POST请求的方法,但它们之间存在一些关键的区别,特别是在处理数据格式和请求头方面。本文将深入探讨这两个方法,并通过一个登录场景的例子来...

    rvt2obj_revit导出_revit生成obj_revitobj_rvt2obj_obj

    3. `使用说明.txt`: 提供了关于如何安装和使用`rvt2obj`工具的详细步骤,通常包括如何将addin文件加载到Revit、如何选择模型进行导出以及导出过程中可能遇到的问题和解决方案。 使用`rvt2obj`工具进行Revit到OBJ...

    display_obj.zip_.obj_.obj用什么打开_display_obj()_matlab 打开obj_obj 3d

    3. **使用`read_obj`工具箱**:另一种方法是使用`read_obj`函数,它会返回模型的顶点、纹理坐标和法线。然后,你可以使用`patch`函数创建一个3D图形。过程与上述类似,但具体函数使用可能会有所不同,因为不同的工具...

    主题皮肤JS跨页多选

    if(d.obj.eCont.value==''||d.obj._judgeCorrectDateTime(d.obj.eCont.value)){d.obj._markValue(true); if(d.obj.eCont.value!=''){d.obj._initDate(d.obj.eCont.value,d.obj.dateFmt); d.obj._setRealValue();} ...

Global site tag (gtag.js) - Google Analytics