CSS hover改变原生时出现抖动解决方法_原生加hover

作者：我家小花儿 | 2024-06-30 04:34:06

踩

原生加hover

有时我们会通过hover改变元素展示状态或高宽度
但这样可能会引发页面抖动的奇葩事
首先分析原因 : 其实这是谷歌浏览器的BUG 当你改变内容时浏览器以为元素超出了，立刻展示出滚动条过一会儿又发现 :哦元素改变了，但并没有超出啊…
于是就又把滚动条收回去了 …说实话我很无语这个
那解决办法就很明显了
首先是最简单的

html{
    overflow-y: scroll;
}
1
2
3

这样就不会抖动了，但坏处是滚动条会一直展示就是元素没用超出依旧会展示出一条白线
你可以隐藏滚动条但不建议这样做因为如果客户鼠标滚轮不好用那就尴尬了

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
1
2
3

或者

html{
    overflow-y: hidden;
}
1
2
3

如果知道自己的元素肯达不会超出就可以这样写否则还是不建议这种写法

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/771378