offsettop，offsettop和scrolltop的区别
1、offsetLeft 和 offsetTop 获取的是元素相对于其 offsetParent 元素的左上角偏移量单位为像素，而非直接相对于浏览器窗口或文档的偏移量具体特性如下1 核心定义offsetLeft元素左侧外边框到其 offsetParent 左侧内边框的距离offsetTop元素顶部外边框到其 offsetParent 顶部内边框的距。
2、scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离1offsetTop offsettop？ ？ 当前对象到其上级层顶部的距离不能对其进行赋值设置对象到页面顶部的距离请用styletop属性2offsetLeft ？ ？当前对象到其上级层左边的距离不能对其进行赋值设置对象到页面。
3、scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离1offsetTop 当前对象到其上级层顶部的距离不能对其进行赋值设置对象到页面顶部的距离请用styletop属性2offsetLeft 当前对象到其上级层左边的距离不能对其进行赋值设置对象到页面左部。
4、11elementscrollTop 返回该元素当前垂直滚动的距离，比如100无单位2elementscrollTop = 100 将该元素垂直滚动的距离设置为100，注意100为绝对值，而不是相对值比如当前元素垂直滚动距离 elementscrollTop = 200，则设置完后，该元素垂直滚动的距离为100，而不是100+200 2offsetTop。
5、offset属性主要包括以下几个offsetTop获取当前元素相对于其offsetParent元素顶部的距离offsetLeft获取当前元素相对于其offsetParent元素左边的距离offsetWidth获取当前元素的宽度包括内边距和边框，但不包括外边距offsetHeight获取当前元素的高度包括内边距和边框，但不包括外边距offsetParent。
6、offsetWidth表示元素在水平方向上占用的空间大小，无单位offsetHeight表示元素在垂直方向上占用的空间大小，无单位测试时，请注意修改盒子大小使用，offsetWidth和offsetHeight是只读属性offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离，offsetLeft表示元素的左外边框至。
7、offsetTop是自身的y坐标scrollTop是滚动过的y长度如果没有滚动的空间的话，scrollTop是为0的，这个常运用在子对象高度大于父对象，然后子对象可以滚动显示，有时我们需要知道这个子对象究竟向下滚动了多长的距离，就用到子对象的scrollTop去求得，同样的，我们在使用无间隙向上或是向下滚动时也要用到这个的。
8、topexpressionevaldocumentElementscrollTop+照字面意思来看，应该是这样的意思1top 说的是距离顶部距离，比如相对于屏幕，框架，层等对象应该是样式设置2expression是 一个函数，不知道它是怎样具体实现的，反正最后返回一个数值3eval是一个。
9、scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10offsetTop则是元素的上边框与父元素的上边框的绝对距离两者描述的不是同一个东西，所以没有可比性。
10、scrollTop是 Sets or retrieves the distance between the top of the object and the topmost portion of the content currently visible in the windowoffsetTop是 Retrieves the calculated top position of the object relative to the layout or coordinate parent， as specified by the offsetParent。
11、offsetLeft返回当前元素相对于其offsetParent元素左内边框的距离 offsetTop返回当前元素相对于其offsetParent元素上内边框的距离 offsetWidth返回元素的布局宽度，包括元素的内边距和边框，但不包括外边距垂直滚动条伪元素的宽度 offsetHeight返回元素的布局高度，包括元素的内边距和边框，但不包。
12、divoffsetTop是div的上边框与带有定位属性相对定位绝对定位固定定位的父元素如果父元素不是定位元素，则继续上溯所有祖先元素直到body的上边框之间的绝对距离，它是个数值，单位是像素，比如100就是100像素但它是个只读属性，只能读取，不能通过赋值来改变div的绝对上边距则。
13、实现步骤定义辅助函数getOffsetele递归遍历元素的offsetParent，累加每一层的offsetTop和offsetLeft，最终返回元素相对于文档的绝对偏移量对象包含top和left属性定义核心函数getOffsetInParentele， parent调用getOffsetele和getOffsetparent分别获取目标元素和父元素的绝对偏移量，通过相减得到目标。
14、页面滚动导致JavaScript坐标偏移的解决方法是获取页面滚动距离，并将其添加到计算后的坐标中进行修正具体分析如下问题根源页面滚动改变了元素相对于视口viewport的位置offsetTop和offsetLeft等属性获取的是元素相对于其父元素的偏移量，而非相对于整个页面的位置当页面滚动时，若直接使用这些属性。
15、offsetX = eventclientX draggableElementoffsetLeft offsetY = eventclientY draggableElementoffsetTop 2 拖拽时更新元素位置 documentaddEventListener#39mousemove#39， event = if offsettop！isDragging return = `$。
16、布局信息查询调用offsetTopgetComputedStyle等属性时，浏览器会立即执行渲染队列中的待处理变化以返回实时值，导致优化失效三性能优化策略1 最小化重绘和重排合并样式修改问题示例多次修改内联样式如会触发多次重排优化方案使用cssText合并样式el。
17、如果在 DOM 结构中的某个 DOM 节点使用了 vif vshow 或者 vfor 即根据获取到的后台数据来动态操作 DOM，即响应式，那么这些 DOM 是不会在 mounted 阶段找到的mounted 阶段，一般是用于发起后端请求，获取数据，配合路由钩子做一些事情简单来说就是在 mounted 钩子中加载。
相关标签 :
mousemove
