吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1803|回复: 8
收起左侧

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

  [复制链接]
zldtb19931116 发表于 2022-9-17 17:57
本帖最后由 zldtb19931116 于 2022-9-17 18:01 编辑

本人并不擅长前端开发,只是工作需要,能用vue写写管理平台,不会写css动画,然而今天遇到一个灵异事件,先看效果:
111.gif
这肯定不是我写的动画,鼠标没动,为啥滚动条会一跳一跳呢?还挺灵动的,让我专门写这效果我也写不出来。

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

我实现的思路就是在timeline下面加个这个标签,请求的时候显示,请求完了隐藏。
想着应该居中,就用width:100%;text-align:center; 设置成和父组件一样的宽度,再居中就容易了。
image.png
然而隐藏的代码还没来得及写,我就发现滚动条跳起来了。跳的还挺灵动的。

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

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

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

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

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

为了验证猜想,我写了个空白页面,加上一个转圈圈的图标:
image.png
效果果然跟我想的一样
222.gif

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

333.gif

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

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

免费评分

参与人数 3吾爱币 +3 热心值 +3 收起 理由
kk1212 + 1 + 1 谢谢@Thanks!
a454635280 + 1 + 1 谢谢@Thanks!
汪小茗 + 1 + 1 用心讨论,共获提升!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

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]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-29 13:15

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表