吃了激素的滚动条，给我停下来！！！

zldtb19931116 · 发表于 2022-9-17 17:57

本帖最后由 zldtb19931116 于 2022-9-17 18:01 编辑

本人并不擅长前端开发，只是工作需要，能用vue写写管理平台，不会写css动画，然而今天遇到一个灵异事件，先看效果：

这肯定不是我写的动画，鼠标没动，为啥滚动条会一跳一跳呢？还挺灵动的，让我专门写这效果我也写不出来。

事情是这样，我写了一个能无限滚动的timeline，用的是v-infinite-scroll,在滚动到最下面的时候触发事件获取下一页就是拉到最底下自动获取下一页数据。为了好看想在网络请求的时候显示个转圈圈，就是加载的时候经常看到的那种。

这是element ui自带的，我就直接用了。

我实现的思路就是在timeline下面加个这个标签，请求的时候显示，请求完了隐藏。
想着应该居中，就用width:100%;text-align:center; 设置成和父组件一样的宽度，再居中就容易了。

然而隐藏的代码还没来得及写，我就发现滚动条跳起来了。跳的还挺灵动的。

不精通前端的我一开始以为是v-infinite-scroll这个方法有什么鬼，于是删掉，还是一样。

我怎么也没想到一个转圈的<i>标签能有什么魔力导致滚动条跳起来，所以压根没往这上面怀疑。

奇怪了好一会儿没搞明白原因，换了个图标，滚动条安静了，或者把width:100%删掉，也不动了。

我一开始以为这个转圈圈的图标是个gif，所以一直没搞明白原因，折腾好久才想明白，原来这个转圈圈原来并不是一个gif，而是内置了一个转圈圈的css动画。

本来这个图标宽和高一样的，转起来没有什么问题，但当我把宽度设置为100%, 这个图标的宽和高就不一样了，所以在转的时候不断改变了页面的高度，滚动条才会一直滚。

为了验证猜想，我写了个空白页面，加上一个转圈圈的图标：

效果果然跟我想的一样

再看看去掉text-align:center的居中效果，哈哈

搞明白原因了，我以为是滚动条吃了激素。

突然觉得，以后可以故意这么写，这滚动条一跳一跳，还挺可爱的。

zhuwaihui · 发表于 2022-9-17 19:57

ev8d 嗨起来

Nemoris丶 · 发表于 2022-9-17 21:08

笑死我了红红火火恍恍惚惚。马下来！回头用在项目上哈哈哈哈哈哈哈哈哈哈哈

tinyu · 发表于 2022-9-17 21:17

哈哈哈嗝给我看乐了，好可爱的滚动条

xuanx · 发表于 2022-9-17 22:31

虽然我不会用，但是我可以笑，哈哈哈哈哈哈哈哈

pwp · 发表于 2022-9-17 22:54

不明觉厉

kk1212 · 发表于 2022-9-18 08:51

感谢分享！

lztym · 发表于 2022-9-18 10:08

感谢分享！

zldtb19931116 · 发表于 2022-9-22 13:31

挖坟，来了，123

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 吃了激素的滚动条，给我停下来！！！

免费评分