莫名抖动的调试过程（完整版）
大家看这个浮动的图片哈
我在切换页面的一瞬间注意看
是不是抖一下
我再切换回来也是
看
那碰到这个问题我们怎么去调呢
因为他就是那一瞬间的事
我们没办法去检查这个元素对吧
所以我们可以这样
先把控制台打开
找到这个 Animations
如果没有呢我们就在这点这 moretools
然后 animations 把它点开之后哈
我们先去到别的页面
然后呢我们把速度调慢再进来
大家看现在是不是慢了
我就可以找一个（合适的）时候给他暂停
暂停之后我就可以检查这个元素了
就是这个 class = box
他现在呢就是 position:fixed
我们都知道
这个 fixed 的是基于浏览器窗口定位的
就是这个 top 200现在应该是
距离浏览器顶部到这为200
那我们把它改成0试试
大家看这个0明显就不是浏览器 顶部
而是这个 div 的顶部
为什么这样呢
我们来看一下 position: fixed （的定义）
他最后有一句话说
当元素祖先的这几个属性非空时
容器由视口改为该祖先，也就说
当这个 fixed 的元素
他的父级元素（中）有一个
是这几个属性非空的时候呢
他就会基于那个父极元素去定位
而不是浏览器窗口了
这回我们就不难理解
为什么切换页面他会抖一下
因为切换页面他是有一个动画效果的
我们再把动画加回来
大家看
就是左右滑的这么一个动画效果
所以我们可以推断出来
他应该就是这个动画效果
使用了这个 transform 来实现的
那我们来验证一下哈
我们先来找到这个动画
他用的是 element-ui 里面的
先把这个去掉
好我们再刷新一下
大家看，这回就不会抖了
那如果我们一定要保留这个动画效果
同时呢我们还不想让它抖怎么办呢
我们就要想办法让这个层
就是这个 position: fixed 的这个
这个 div 在dom结构上改变一下
不要放在这个 div 里面了
看一下代码哈
就是这个 div (class-"box")
想办法把它放在body里面
这种需求的话呢
我们就可以考虑封装一个
公用的组件
比如说我们（希望）这样写
InBody
写在 InBody 里面的内容的东西
都会直接被
挂载到 body 那个组件（节点）里面
好那我们来写一下这个组件
其实也很容易
我们先建一个 vue 的文件
在这个目录下哈
那我们就叫
InBody.vue
然后呢我们写一个 vue文件
那这里边呢
我们只需要一个 mounted 的方法
和 destroyed
其他的方法都不要了
然后这里边很简单
一个插槽
然后 mounted 的里面怎么写呢
我们可以通过他的这个方法
拿到他的
dom节点
（我们声明个变量）
我们就叫 node 吧
好，然后呢我们 document.body.appendChild
把这个 node 放进去
好然后呢
destroyed 一样
我们要把它移除掉
node.remove 很简单
好这样这个组件就完事了
那我们可以把这个组件注册到全局
因为这个比较公用
我们先把它导进来啊… 在这吧
components
引爆的有没有
然后呢这个也叫InBody
然后呢我们把它注册到 vue 里 …
他起个名就叫 InBody
然后 InBody
OK
然后我们在这块
就可以这样用了
其他的就不用改了
我们重启一下哈
试一下：切换、回来
然后呢也可以浮动
我们检查一下元素
然后找到这个 box
大家看他现在
就在 body 里面
这样就 OK 了
然后以后在这个项目里
想把什么内容直接放到包的元素下边
可以用这个标签包裹起来就可以了
最近更新 10mo ago