各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

2024-06-22 15:58
文章标签 position offset outerheight scrolltop scrollheight clientheight 高度 位置 计算

本文主要是介绍各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、.position()和.offset()

jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left；

jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top, 算上自己的margin-left,，还可以设置.offset({left:,top:});这个很有用，比如编写日期控件时，append到body上，然后就可以根据input的.offset()和高度设置日期控件的.offset()，最终这些值自动会被换算为position为relative（相对于body）的top和left。

jquery的.offset()与js的obj.offsetLeft和.obj.offsetTop一样，只是这个不能赋值。

2、.outerHeight()、.innerHeight()和.height()

jquery的.outerHeight()=border+padding+height，等同于js的.offsetHeight（.offsetWidth同理）

.outerHeight(true)=margin+border+padding+height

.innerHeight()=padding+height

.height()设置和获取高度

3、.scrollTop和.scrollHeight

.scrollTop:已经滚动过的高度;
.scrollHeight:整个滚动的高度，从开始到滚动结束滚动过的高度，包括滚动元素自身的高度。

用图来解释：如下图，contentContainer为父元素，content为它的子元素，由于它的高度设置得比父元素高度高，所以父元素出现了滚动条。

假设现在滑动条已划过了一段距离，

则contentContainer的scrollTop为a，scrollHeight为b。

4、监听整个网页的滚动事件：

测试ie11、chorme、firefox，发现body上不支持监听整个网页的滚动事件scroll,window上都支持：window.οnscrοll=function(){};

5、获取/设置网页已滚动的高度：

 chrome

document.documentElement.scrollTop无效为0，

document.body.scrollTop有效与$('body').scrollTop()+','+$(document).scrollTop()等值

 safari与chrome表现相同 
 ie11（包括其模拟的IE10-7）

document.documentElement.scrollTop有效与$(document).scrollTop()等值，

document.body.scrollTop无效为0，$('body').scrollTop()无效为0

 firefox

document.documentElement.scrollTop有效与$(document).scrollTop()等值，

document.body.scrollTop无效为0，$('body').scrollTop()无效为0

 

所以获取网页已滚动的高度时：Math.max(document.documentElement.scrollTop,document.body.scrollTop)或$(document).scrollTop()
jquery和js的scrollTop都可以赋值。
所以如果要设置‘返回顶部’的效果应该：

$('#totop').click(function(){document.body.scrollTop?document.body.scrollTop=0:document.documentElement.scrollTop=0;//或$(document).scrollTop(0);
})

另外测试同一个页面，用鼠标滚轮把页面滚动到底，ie11和chrome都只触发了两次，大概是scrollTop从166到230,而firefox则触发了15次，看来ie11和chrome对触发滚动事件做了优化。可以手动添加判断两次滚动间隔超过多少px才允许运行onscroll函数:

var stop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
window.onscroll=function(){if(Math.max(document.documentElement.scrollTop,document.body.scrollTop)-stop>100){//do something}
}

6、获取body视口高度：

有<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时：

 chrome

document.documentElement.clientHeight有效，window.innerHeigh有效，

document.body.clientHeight无效与$('body').height()等值

 ie11（包括其模拟的IE10-9）

document.documentElement.clientHeight有效，window.innerHeigh有效，

document.body.clientHeight无效与$('body').height()等值, 

 用ie11模拟ie8、ie7window.innerHeight为undefined，其他相同
 firefox

document.documentElement.clientHeight有效，window.innerHeigh有效，

document.body.clientHeight无效与$('body').height()等值

无<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时：
chrome：document.documentElement.clientHeight无效与$('body').outerHeight(true)等值，window.innerHeigh有效，document.body.clientHeight有效，即使是有<!DOCTYPE>也是如此。
ie11:document.documentElement.clientHeight有效,document.body.clientHeight有效(ie7,8,9:无效与$('body').outerHeight(true)等值),window.innerHeigh有效,（用ie11模拟ie8、ie7时，window.innerHeight为undefined），即使是有<!DOCTYPE>也是如此。

所以在保证有完整<!DOCTYPE...声明的前提下，获取body的视口高度为：document.documentElement.clientHeight;

7、判断div的滚动条滚到底部

只要判断这个div已滚动的距离scrollTop+自己本身的高度offsetHeight>这个div的scrollHeight就表示滚动到底了。
如：一个id='contentContainer'的div里面包含一个高度查过自己 id='content'的子div。

则只要

复制代码

document.getElementById('contentContainer').onscroll=function(){if(this.scrollTop+this.offsetHeight>=this.scrollHeight){$(this).append('bottom');//不要用==因为很多浏览器并不是每滚动1px就触发scroll事件的}
}

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>example</title> </head> <body > <div id='show'></div><div id='contentContainer' style="margin:10px 0 0 10px;overflow:auto; padding:30px;height:300px;width:80%;border:2px solid black;"> <div id='content' style="margin:10px 0 0 10px; padding:10px;height:700px;width:80px;border:1px solid black;"></div> </div> <script type="text/javascript"> document.getElementById('contentContainer').οnscrοll=function(){ if(this.scrollTop+this.offsetHeight>=this.scrollHeight) document.getElementById('show').innerHTML=document.getElementById('show').innerHTML+'tobottom,'; } </script> </body> </html>

8、判断body的滚动条滚到底部:
获取页面的scrollHeight：document.documentElement.scrollHeight在各浏览器中表现一致。
监听页面滚动条滚到底部： 

window.onscroll=function(){    var scrolltop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);     if(scrolltop+document.documentElement.clientHeight>=document.documentElement.scrollHeight)alert( 'nowbottom' );
};

这篇关于各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1084744。

相关文章

计算绕原点旋转某角度后的点的坐标

计算绕原点旋转某角度后的点的坐标

问题： A点（x, y）按顺时针旋转 theta 角度后点的坐标为A1点(x1,y1)  ，求x1 y1坐标用（x，y）和 theta 来表示 方法一： 设 OA 向量和x轴的角度为 alpha ， 那么顺时针转过 theta后 ，OA1 向量和x轴的角度为 (alpha - theta) 。 使用圆的参数方程来表示点坐标。A的坐标可以表示为： \[\left\{ {\begin{ar
阅读更多...
chart 完成拓扑图单节点拖拽不影响其他节点位置

chart 完成拓扑图单节点拖拽不影响其他节点位置

就是做这种的功能，箭头原本是可以动态重复移动的，但不知道哪里问题导致没箭头了，然后补了个edgeSymbol: ['','arrow'], 字段，才增加了箭头。 拖拽某个节点，只有关联到的线条会跟着变动其他的节点位置不变。 参考 https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9 https://echarts.baidu.com/exa
阅读更多...
background-position切图

background-position切图

老生常谈，网上也很多，但是还是记下。 .overview-user-icon {background-image: url('../../../../static/imgs/overview-201811161524.svg');width: 24px;height: 24px;display: inline-block;background-size: 475% 458.3333333333
阅读更多...
高度内卷下，企业如何通过VOC（客户之声）做好竞争分析？

高度内卷下，企业如何通过VOC（客户之声）做好竞争分析？

VOC，即客户之声，是一种通过收集和分析客户反馈、需求和期望，来洞察市场趋势和竞争对手动态的方法。在高度内卷的市场环境下，VOC不仅能够帮助企业了解客户的真实需求，还能为企业提供宝贵的竞争情报，助力企业在竞争中占据有利地位。 那么，企业该如何通过VOC（客户之声）做好竞争分析呢？深圳天行健企业管理咨询公司解析如下： 首先，要建立完善的VOC收集机制。这包括通过线上渠道（如社交媒体、官网留言
阅读更多...
【云计算 复习】第1节 云计算概述和 GFS + chunk

【云计算 复习】第1节 云计算概述和 GFS + chunk

一、云计算概述 1.云计算的商业模式 （1）软件即服务（SaaS） 有些景区给游客提供烧烤场地，游客需要自己挖坑或者砌烧烤台，然后买肉、串串、烧烤。 （2）平台即服务（PaaS） 有些景区给游客提供烧烤场地，同时搭建好烧烤台，游客只需要自己带食材和调料、串串、烧烤。 （3）基础设施即服务（IaaS） 有些景区给游客提供烧烤场地，同时搭建好烧烤台，还有专门的厨师来烧烤，用户不需要关心前面的所有
阅读更多...
ScrollView 往上滑动，里面的一个View停在某个位置的思路

ScrollView 往上滑动，里面的一个View停在某个位置的思路

1.scrollView的contentoffset 为view的左上角，减去此时scrollView的左上角 2.而且还不需要让那个红色的view removeFromSuperView ，直接self.view AddSubView 就会自动从原来的那个View脱离开来 3.以后遇到问题的思路。当发现UIView很许多奇特的效果的时候，思考它是不是在不断的改变父控件。 #pragma m
阅读更多...
算法7— 判断一个单链表是否有环，如果有，找出环的起始位置

算法7— 判断一个单链表是否有环，如果有，找出环的起始位置

第一种方法是从单链表head开始，每遍历一个，就把那个node放在hashset里，走到下一个的时候，把该node放在hashset里查找，如果有相同的，就表示有环，如果走到单链表最后一个node，在hashset里都没有重复的node，就表示没有环。 这种方法需要O(n)的空间和时间。 第二种方法是设置两个指针指向单链表的head, 然后开始遍历，第一个指针走一步，第二个指针走两步，如果没
阅读更多...
什么是dB？dBm、dBc、dBi、dBd怎么计算，有什么区别？

什么是dB？dBm、dBc、dBi、dBd怎么计算，有什么区别？

什么是dB？dBm、dBc、dBi、dBd怎么计算，有什么区别？ 引言 在电子工程、通信和音频领域，dB（分贝）是一个常见的术语。许多人刚接触时可能会感到困惑，因为它不仅仅是一个简单的单位，还有多种不同的形式，如dBm、dBc、dBi和dBd。这篇文章将详细解释这些概念，并介绍如何计算它们，帮助初学者更好地理解和应用。 什么是dB？ dB，即分贝，是一种表示两个数值比值的对数单位。分贝的基
阅读更多...
QML 中宽度、高度与隐式宽度/高度的区别及其应用场景

QML 中宽度、高度与隐式宽度/高度的区别及其应用场景

在 QML 中，width、height 与 implicitWidth、implicitHeight 这几个属性常常令开发者感到困惑。本文将详细介绍它们之间的区别，并说明在何种情况下应使用隐式尺寸以及普通尺寸。 基本定义 width 和 height：表示组件/item 的实际尺寸。implicitWidth 和 implicitHeight：表示组件/item 的自然尺寸，即在未明确指定尺
阅读更多...
游戏高度可配置化（一）通用数据引擎(data-e)及其在模块化游戏开发中的应用构想图解

游戏高度可配置化（一）通用数据引擎(data-e)及其在模块化游戏开发中的应用构想图解

游戏高度可配置化（一）通用数据引擎(data-e)及其在模块化游戏开发中的应用构想图解 码客 卢益贵 ygluu 关键词：游戏策划 可配置化 模块化配置 数据引擎 条件系统 红点系统 一、前言 在插件式模块化软件开发当中，既要模块高度独立（解耦）又要共享模块数据，最好的方法是有个中间平台（中间件）提供标准的接口来进行数据的交换，这在很多行业软件开发中已经广泛应用。但是，由于中间件的抽象和封
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2