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

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

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

{
width:1000px;
margin:auto
}

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

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

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

总结:

{
overflow-y:scroll;
}

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 的方法是什么? 在 CSS 中,可以使用 "overflow: hidden" 来隐藏滚动条。这样,如果内容超了容器的大小,将不会显示滚动条。 例如: ``` div { overflow: hidden; } ``` ### 回答2: 使用overflow:auto属性可以隐藏滚动条。当使用overflow:auto属性,如果内容超了容器的大小,滚动条会自动现。这个属性会在需要自动添加滚动条,而在内容不超容器大小则不显示滚动条。 当设置overflow:auto,如果内容超了容器的大小,会在水平和垂直方向上都滚动条。这样用户就可以通过滚动条来查看超部分的内容。当内容没有超容器大小,没有滚动条显示。 使用overflow:auto属性隐藏滚动条可以让页面更加美观和整洁。而不使用该属性,当内容超容器大小滚动条,可能会破坏页面的布局,并降低用户体验。 除了overflow:auto,还有其他属性可以隐藏滚动条,比如overflow:hidden。但使用overflow:hidden,超容器大小的内容将被隐藏,用户无法通过滚动条来查看。因此,在需要滚动的情况下,一般推荐使用overflow:auto来隐藏滚动条。 ### 回答3: 当使用`overflow:auto`来隐藏滚动页面内容将被包含在一个容器元素中。该元素的大小和位置将根据内容的大小自动调整。在这种情况下,如果内容超过容器的大小,容器将显示滚动条,以便用户可以滚动查看内容的其他部分。 相比于使用其他方法来隐藏滚动条,`overflow:auto`的优势在于它只会在内容超过容器大小展示滚动条。这意味着当内容不足以填满容器滚动条将自动隐藏,使页面更美观。 在页面中使用`overflow:auto`的一个常见应用是在含有长内容的区域中,如文章、评论或电子邮件列表。这样,当内容过多以致无法一次显示完整,用户可以通过滚动条来查看隐藏的内容。 但需要注意的是,`overflow:auto`只能隐藏页面内容区域的滚动条,而无法隐藏浏览器本身的滚动条。如果想要隐藏整个页面滚动条,可以使用其他方法,如通过调整页面布局或使用JavaScript来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值