公告:携程招聘java、前端、测试、产品等,请发简历至374947554@qq.com,帮内推!

js获取某dom到根元素的offsetLeft/offsetTop

前言

大家知道,offsetLeft和offsetTop都是获取当前元素到其定位父级(offsetParent)的距离,我前面也有很多文章介绍宽高和offset,例如:https://www.haorooms.com/post/js_jquery_height 等 在实际的开发过程中,我们通常要获取dom到根元素的距离。这个如何做呢?

思路

其实很简单,父元素是offsetParent,我们循环查找offsetParent,直到根节点为止。

获取距离顶部距离

回顶部及缓动滚动到某个位置

前言

今天这篇文章应该是javascript回到顶部滑动效果及点击导航滑动到相应热点的效果,这篇文章的升级版。写这篇文章的时候,可能三大框架(react,vue,angular)等还没有流行,还是jquery的时代。如今,前端发展迅速,这篇文章已经过时了。那么新时代,热点动态滚动,及回到顶部用什么方法呢?

实现方案

新时代实现这个动画方法很多,今天主要介绍4种吧,由推荐的简单办法,到js方案。

纯css方案

js查找树结构某元素,并找到其所有祖先

前言

写了一个类似element ui的级联面板的那个组件,不同的是,组件可以类似tree选择,选择某个子元素,就返回单个子元素,选择所有子元素,返回父元素。回头整理一下。开源出来。

难点

感觉难点就是数据回填,数据操作倒是不是很难。

数据操作思路:

小tips,注意vue深度监听对象新老值如何保持不一样

前言

假如你用vue监听复杂对象的时候,新旧值通常是一样的,vue官方也给出了解释:

注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

那么,问题来了,如何让vue深度监听对象新老值如何保持不一样?

Vue官方也给出了方案: