吃了激素的滚动条，给我停下来！！！
本帖最后由 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的居中效果，哈哈
搞明白原因了，我以为是滚动条吃了激素。
突然觉得，以后可以故意这么写，这滚动条一跳一跳，还挺可爱的。 ev8d 嗨起来 笑死我了红红火火恍恍惚惚。马下来！回头用在项目上哈哈哈哈哈哈哈哈哈哈哈 哈哈哈嗝给我看乐了，好可爱的滚动条 虽然我不会用，但是我可以笑，哈哈哈哈哈哈哈哈 不明觉厉 感谢分享！ 感谢分享！ 挖坟，来了，123
页:
[1]