overflow:auto 时页面滚动条出现时跳动

Posted 2022-12-03 haliofwu

产生环境:

ant.design写的Item的时候,给选中添加背景.但是发现,在点击全部时,页面会有跳动,其他章节则不会有跳动.
章节内容的展示,是以

width:1000px;
margin:auto

或者 grid 的 auto 1000px auto 去实现的.

最后发现问题的所在是:
全部的时候因为内容较多,右侧产生了滚动条;而其他章节的时候,因为内容少,并没有滚动条产生.滚动条产生的时候是会占据一定的页面宽度.这就导致,auto的部分其实是重新计算的.整体的内容往左侧偏移了.使得整个页面产生一种闪烁的感觉..

google.张鑫旭大神居然有总结.
总结链接地址:小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

总结:

overflow-y:scroll;

让右侧一直有个滚动的点在那占据位置.这样就不会出现闪烁了.
作者写了其他的优化,but,还是这个最简单啊…..