offsettop

个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出现更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结， 以用来判断元素是否在可视区域以及用原生js简单实现懒加载 。文末有个简单的懒加载实现的demo，有需要的可以看一下。 目录 工欲善其事，必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前，我们先简单回顾下以下几个关键的概念。 ps： 如果你对这些概念已经比较熟悉了，可以直接跳到第五点查看关键代码示例。 1. 偏移量 偏移量(offset dimension),元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小( 注意，不包括外边距 )。通过下列4个属性可以取得元素的偏移量。 偏移量 概念 公式 offsetHeight 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。 offsetHeght = content + padding + border + scrollX offsetWidth 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂 直滚动条的宽度、左边框宽度和右边框宽度

页面描述：页面分为左右两个部分，左边是目录树，右边是id=main_box的div，在main_box中含有多个div并列，上下排布，数量较多，页面上放不下，所以设置了main_box的css样式： .main_box { overflow-y:scroll; } 让main_box可以滚动，但是我希望知道滚动到哪个子div了，好让左边的目录树对应的节点高亮显示 mounted() { this.refreshData(); // 通过$refs获取dom元素 this.box = this.$refs.viewBox; // 监听这个dom的scroll事件 this.box.addEventListener('scroll', () => { /*console.log(" scroll " + this.$refs.viewBox.scrollTop);*/ var current_offset_top = this.$refs.viewBox.scrollTop; if(this.elements.low.index == this.elements.high.index){ //初始状态 this.elements.high.index ++; let i = this.elements.high.index; var catogry = this.code_data[i

个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出现更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结， 以用来判断元素是否在可视区域以及用原生js简单实现懒加载 。文末有个简单的懒加载实现的demo，有需要的可以看一下。 Ŀ¼ 工欲善其事，必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前，我们先简单回顾下以下几个关键的概念。 ps： 如果你对这些概念已经比较熟悉了，可以直接跳到第五点查看关键代码示例。 1. 偏移量 偏移量(offset dimension),元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小( 注意，不包括外边距 )。通过下列4个属性可以取得元素的偏移量。 偏移量 概念 公式 offsetHeight 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。 offsetHeght = content + padding + border + scrollX offsetWidth 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂 直滚动条的宽度、左边框宽度和右边框宽度

1.js获取div元素 clientHeight 获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 clientWidth 获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。 offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。 offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 clientX , clientY 鼠标当前相对于网页的位置，当鼠标位于页面左上角时 clientX = 0 , clientY = 0

本文转载于: 猿2048 网站☞ https://www.mk2048.com/blog/blog.php?id=haji2jaaaa offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。 var offsetWidth = element.offsetWidth; offsetHeight HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 var offsetHeight = element.offsetHeight; offsetTop /

答： 重排： 是引起DOM树重新计算的行为 重绘： 一个元素外观的改变 （如color ） 所触发的浏览器行为 减少： 分离读写操作; 样式集中改变; 使用absolute脱离文档流; 使用 display:none； 一个页面由两部分组成 DOM：描述该页面的结构 render：描述 DOM 节点 (nodes) 在页面上如何呈现 当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 重绘 repaint。 如果变化涉及元素尺寸重新计算 , 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 重排 reflow。 重绘不会带来重新布局，并不一定伴随重排 重排一定会引起浏览器的重绘 常见的触发重排的操作： 1.DOM树的结构变化， 如节点的增减、移动 2.DOM元素的几何属性变化，如外边距、内边距、边框厚度、宽高、等几何属性) 3.窗口属性的获取和尺寸改变，如 offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

css /* 显示区域 */ #contenter{height: 768px;width: 512px;position: relative;left: 350px;overflow: hidden;} /* 背景 */ .bg{height: 768px;width: 512px;position: absolute;background: url("../img/fjbg.jpg")} #bg2{top: -768px;} /* 飞机 */ .fj{height: 61px;width: 79px;background: url("../img/fj.png");left: 200px;top: 680px;position: absolute} /* 子弹 */ .bullet{height: 10px; width: 5px;background: #fff;border: 1px solid #333;position: absolute;} /* 敌军 */ .dj{height: 80px;width: 80px;background: #333;position: absolute;top: 150px;} .xs{display: none;} html <div id="contenter"> <div id="bg1" class="bg"></div>

壹 ❀ 引 我在angularjs中使用锚点这篇文章中，踩坑并简单实现了楼层导航中点击小图标跳转到对应楼层的功能；但对于楼层导航而言，还有个重要的功能就是，随着滚动条滚动，达到某层时得同步点亮楼层导航的小图片。 由于我前面也说了不打算使用JQ，所以想着用JS去实现它，实现并不难，主要得弄清滚动满足怎样的条件才应该点亮对应楼层，我们先看看实现效果： 贰 ❀ 实现思路 第一点，因为是由滚动触发的楼层判断，所以肯定离不开 onscroll事件 。 第二点，我们貌似要获取每个楼层顶端距离视窗顶部的距离，随着滚动条往下滚动，此距离会不断缩小，当接近到某个距离时我们判定此楼层入画，当然其它楼层都满足此判定。 而JQ提供了一个 offset().top 方法能获取这个值，js中只有一个offsetTop属性，获取的是 距离自己最近position属性为非static的祖先元素的距离 ，此 距离不随滚动条滚动而缩小 。 当然我们有方法模拟计算出 offset().top 的值，但没必要，如果你对JQ的offset().top与js的offsetTop有什么区别，以及对如何模拟出JQ的offset().top的值有兴趣，可以参照博主这篇文章 JQ的offset().top与js的offsetTop区别详解 。 这里我直接引用了我之前博客得到的结论： offset().top = offsetTop

图片延迟加载练习 1、javascript实现图片延迟加载方法汇总(三种方法)（转） https://www.cnblogs.com/huangshikun/p/6640862.html 2、 知识点应用： 1.浏览器尺寸获取： - 可视区高度：document.documentElement.clientHeight - 滚动条的距离： window.pageYOffset（只读） - 元素上边到视窗上边的距离： object.getBoundingClientRect( ).top - 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离：offsetTop - 获取元素属性：img1.getAttribute（'src'） - 删除元素： img.removeAttribute（'_src'） 2. html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍 （转）： https://blog.csdn.net/u013795673/article/details/52171411 3. onload事件： 4. onscroll： `延时加载和，定时器一起用会出现bug ` 5.onerror： 事件会在文档或图像加载过程中发生错误时被触发 3、思路整理 ： 1.可视区的大小 document.documentElement