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

产生环境:
这里写图片描述

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

{
width:1000px;
margin:auto
}

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

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

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

总结:

{
overflow-y:scroll;
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值