元素的位置偏移量 offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。...浏览器相关宽高 $(window).height() ：获取浏览器可视窗口的高度； $(document).height() ：获取整个网页文档的高度；当网页高度不足浏览器窗口时，返回的是 $(window...$(document).scrollTop() ：document 元素相对 document 元素对应的滚动条顶部的垂直偏移量，可获取已滚动的距离或设置将要滚动的距离。...() 小； $("html").height() ：在不同的浏览器上获取的高度会有差异，浏览器不兼容。...$(window).height() ：若返回的不是浏览器窗口的高度，可能是网页没有加上 声明。
三、使用原生的 offsetTop 实现 我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...，上，右和下分别相对浏览器视窗的位置。...）顶部的距离（偏移值）。...也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight 也包括水平滚动条的高度； offsetTop： 元素的上外边框至 offsetParent 元素的上内边框之间的像素距离； offsetLeft...（保存变量）； 在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行。
pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是 clientX + 水平滚动条滚动的距离。...pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是 clientY + 垂直滚动条滚动的距离。 坐标系上某一个元素的pageX/pageY 不会 随着滚动条滚动而改变。...page坐标的最大范围是 (document.body.clientWidth + 垂直滚动条宽度, document.body.clientHeight + 水平滚动条高度)。...clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)。 clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动的距离)。...client坐标的最大范围是 (window.innerWidth - 垂直滚动条宽度, window.innerHeight - 水平滚动条高度)。
window window.screen.height 返回屏幕的高度 window.screen.width 返回屏幕的宽度 window.innerHeight/window.innerwidth...返回窗口内部的高度/宽度(不包含工具栏和滚动条) window.pageXOffset/window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素 window.pageYOffset...-浏览器窗口的可见区域 页面高度 document.documentElement.scrollHeight-浏览器窗口的整个页面高度 滚动高度 document.documentElement.scrollTop...浏览器滚动掉的Y距离 鼠标event事件 属性 说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX...以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点
） clientLeft:左边框的宽度(borderLeftWidth) clientTop:上边框的高度(borderTopWidth) //真实的内容宽度和高度其实不是这样的，真实的高度是要把溢出的高度也要加进来...：真实内容的高度(包含溢出)+上填充 获取到的结果都是‘约’等于的值,不同的浏览器结果也是不同的，设置overflow: hidden;有影响，在不同的浏览器中我们获取到的结果是不相同的 scrollLeft.../scrollTop滚动条卷去的宽度/高度 关于浏览器本身盒子模型信息 clientWidth/clientHeight当前浏览器可视窗口的高度和宽度（一屏） scrollWidth.../scrollHeight当前页面真实的宽度和高度（所有屏的宽度和高度，是一个约等于的值） 不管是哪些属性，也不管是什么浏览器，不管是设置还是获取，想要兼容都写两套 获取 document.documentElement...在某些方面不一样 获取复合型值的时候，比如border等需要拆开了来获取，会避免获取不到的问题 ---------------------------浏览器滚动条卷去的高度scrolltop-----
三、使用原生的 offsetTop 实现 我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...，上，右和下分别相对浏览器视窗的位置。...也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight 也包括水平滚动条的高度； offsetTop： 元素的上外边框至 offsetParent 元素的上内边框之间的像素距离； offsetLeft...（保存变量）； 在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行。...因此我们优化的方向就是从减少读取元素属性次数下手，查看代码发现一触发屏幕滚动事件就会调用相关方法读取元素的偏移量。
偏移量 offsetWidth 元素在水平方向上占用的空间大小 包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度...offsetWidth=width+padding+border offsetHeight 元素在垂直方向上占用的空间大小 包括元素的高度、可见的水平滚动条宽度、上边框高度和下边框高度...对象距离左侧和顶部的距离 offsetLeft，offsetTop 对象可视区域的宽度和高度 clientWidth，clientHeight clientWidth=width...+padding 对象滚动宽度和高度 scrollWidth，scrollHeight （对象的实际内容的宽度，不包边线宽度） 对象左侧和顶部滚动的距离 scrollLeft...，scrollTop 滚动大小 scrollWidth：没有滚动条的情况下，元素内容的总宽度； scrollHeight：没有滚动条的情况下，元素内容的总高度； scrollLeft
; 浏览器整个文档的高： document.body.scrollHeight; 获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度)(其他浏览器)：document.body.scrollTop;...获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度)(ie浏览器): document.documentElement.scrollTop; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度...)(其他浏览器)： document.body.scrollLeft; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(ie浏览器)： document.documentElement.scrollLeft...： 文档：是包括滚动条所有的内容 获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ： $(window).width(); 获取页面的文档高度...body的宽度： $(document.body).width(); 获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度) ：$(document).scrollTop(); 获取水平滚动条到左边的水平宽度
目录 背景 粗暴实现 分片实现 虚拟滚动列表形式 每项高度已知 每项高度未知 总结 背景 现在项目中列表页都会做成分页的形式，但是仍然存在一些场景：后端返回所有数据（可能成千上万条），前端渲染。...因为浏览器视窗就这么高，我们能在用户滚动时动态替换当前视窗的内容，所以页面能始终保持少量节点，进而实现一个虚拟的滚动列表。...问题就变得简单了，需要预先使用一个变量存储所有列表的高度height、节点顶部距离顶部的位置top、节点底部距离顶部的位置bottom mounted() { // ......最后滚动条的高度则是最后一条项目的bottom值。 下面使用Mockjs创建不同长度的句子去模拟高度不定。...但是仍然存在一些不足点 以上实现不支持每条项目有复选框等操作 需适配不同高度屏幕的项目展示个数 有感兴趣且有解决思路的大佬欢迎交流~ 原创于@careteen/Blog，转载请注明来源。
—— 浏览器可视窗口 + 边偏移属性 来设置元素的位置； 跟父元素没有任何关系；单独使用的 不随滚动条滚动。...新浪案例分析 顶部图片固定在浏览器可视窗口顶部，不会随窗口一起滚动； 左右两侧的广告图片固定在浏览器可视窗口的左右两侧，不会随窗口一起滚动； 注意：底部的内容图片初始显示在顶部图片的下方，如何解决？...44px 的 margin 可以让 box 显示在顶部图片下方 */ margin: 44px auto; } 注意： 在使用固定定位时，如果盒子中没有内容，需要指定宽度 设置底部内容图片的顶部...案例小结： 固定定位的应用场景：固定在浏览器可视窗口某个位置的布局； 在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度（稍后就讲）。...所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。...每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。...页面高度过小 输入框在页面底部或视窗中下方 输入框聚焦输入文本 只要保持前后滚动条偏移量一致就不会出现上述问题。...在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...此时可用input事件代替输入框的keyup/keydown/keypress事件。 简化回到顶部 曾几何时编写一个返回顶部函数麻烦得要死，需scrollTop、定时器和条件判断三者配合才能完成。
窗口大小 跨浏览器确定一个窗口的大小不是一件容易的事。...在IE9+、Safari和Firefox中，outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）。...在Opera中，这两个属性的值表示页面视图容器的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小（减去边框宽度）。...在Chrome中， outerWidth 、 outerHeight 与 innerWidth 、 innerHeight 返回的值相同，即视口（viewport）大小而非浏览器窗口大小。...IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性，不过它通过DOM提供了页面可见区域的相关信息。
如果存在了滚动条，client只会计算出当前元素展示出来的高度/宽度，而scroll不仅仅会计算当前元素展示出的，还会包含当前元素的滚动条隐藏内容的高度/宽度。...根据不同的值对应可以控制滚动条的位置。 其实这两个属性和上方的Element.scroll()可以达到相同的效果。...offsetWidth/offsetHeight HTMLElement.offsetWidth/Height 是一个只读属性，返回一个元素的布局宽度/高度。...而offsetWidth/offsetHeight返回元素的布局宽度/高度，包含元素的边框(border)、水平线/垂直线上的内边距(padding)、竖直/水平方向滚动条(scrollbar)（如果存在的话...返回的是距离 body 左/上角的偏移量。
offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。...另外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的...新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器 scrollTop 是“卷”起来的高度值，示例： <div style=”width:100px;height:100px;overflow...6.style.pixelLeft: 返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px....利用这个属性可以单独处理以像素为单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em
offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。...另外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的...新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器 scrollTop 是“卷”起来的高度值，示例： <div style=”width:100px;height:100px;background-color...6.style.pixelLeft: 返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px....利用这个属性可以单独处理以像素为单位的数值. 7.style:posLetf: 返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如
它们的宽度和高度以及边界半径也使用百分比设置。...用户再次向上滚动时，该类将从导航栏中删除，并返回其位置。 立即尝试。 酷吧？...使用offset变量，这很容易：对于距顶部15像素的偏移量，请将offset:15px添加到.waypoint()的选项中，然后在.sticky CSS规则.sticky top:0px更改为top:15px...如果您不仅仅想添加和删除类，还可以考虑使用LavaLamp这样的插件。 在某些时候，您可能已经注意到，单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。...它带有两个参数-滚动目标和包含不同选项的对象，在这种情况下，这很容易解释。 单击链接的href属性可以很好地用作滚动目标，并且用作顶部偏移的表达式会将目标放置在视口高度的15％处。
---只读，无法修改 元素.offsetWidth和元素.offsetHeight---获取元素整个的宽度和高度（包括边框）---只读 元素.offsetParent获取当前最近开启了定位的祖先元素--...只读 元素.offsetLeft和offsetTop: 返回相对于父元素的水平和垂直偏移量---只读 元素.scrollWidth和scrollHeight获取元素整个滚动区域的宽和高 元素.scrollLeft...等,尽管解决了返回顶部的问题但仍存在其他缺陷 (3)事件处理函数的工作机制中，在给某元素添加事件处理函数后，一旦事件发生，相应JavaScript代码就会执行，所调用的JavaScript代码的返回值被传递给事件处理函数...---- 解决浏览器兼容性常使用以下写法 //针对IE8以下浏览器不会将事件对象传入到事件函数的参数中 event=event||window.event; //针对浏览器滚动条归属权的不同做出的兼容性写法...—navigator 不同的userAgent中会存储不同的浏览器信息，每个浏览器基本都有自己的唯一标记，可以通过正则表达式判断 通过 属性名 in 对象 可以判断对应的属性在当前对象中是否存在
不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 window.outerHeight/window.outerWidth： 返回表示窗口的外部高度/宽度的数字。...包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 image.png 1.2 与屏幕相关 window.screen.width/window.screen.height： 返回表示屏幕的宽度...window.screen.availHeight/window.screen.availWidth： 返回表示屏幕的可用宽度/可用高度的数字。不包括可能位于任意一侧的任务栏。...注意：IE 和 Opera 下表示的是窗口文档区到屏幕的距离，这意味着窗口最大化时，screenTop 返回的是窗口顶部栏的高度而不是 0。...image.png jQuery width()/height()： 无参时返回元素的 content 的宽度/高度，传参时（数字或者函数）设置元素的 content 的宽度/高度。
一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话...offsetHeight HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。...clientTop / clientLeft clientTop Element.clientTop 是一个只读属性，表示一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。...innerWidth window.innerWidth 是一个只读属性，表示浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。...一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
