浏览器右边滚动条,导致加载内容出现时出现晃动的情况

在这里插入图片描述
这种浏览器滚动条,在页面内容加载时会出现晃动。

我在网上搜索了一下。

有说这个方法的,实际测试下来,确实没有滚动条,也不晃动了,但是鼠标滑轮就不能控制界面上下滚动了,这个应该是需要自己写滚动条的,比较麻烦。所以我就pass掉了

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

最后我就干脆让所有页面都有一个滚动条,这样既简单又解决了晃动的办法,但是不是很美观。但这是最简单的方法了

html{
  overflow:scroll
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要实现缩小浏览器布局不变,但出现平滑滚动条的效果,可以使用 CSS 的 `overflow` 属性。具体做法如下: 1. 在需要出现滚动条的元素上添加 `overflow: auto;` 或 `overflow: scroll;` 样式,这会使元素出现滚动条。 2. 为了让滚动条出现在元素的内部,而不是覆盖在元素上,可以使用 `padding` 属性为元素设置一定的内边距。 3. 使用 CSS 的 `::-webkit-scrollbar` 伪元素为滚动条添加样式,例如修改滚动条的颜色、宽度等。 4. 如果需要实现平滑滚动条的效果,可以使用 `::-webkit-scrollbar-thumb` 伪元素为滚动条的拖条添加样式,例如修改拖条的颜色、圆角等。 下面是一个示例代码: ``` <style> .scrollable { overflow: auto; padding: 10px; } .scrollable::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f5f5f5; } .scrollable::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } </style> <div class="scrollable"> <!-- 这里放置需要滚内容 --> </div> ``` 在上面的示例,我们创建了一个名为 `scrollable` 的样式类,为其设置了 `overflow: auto;` 和 `padding: 10px;` 样式,使元素出现滚动条,并设置了一定的内边距。然后,使用 `::-webkit-scrollbar` 伪元素为滚动条添加样式,为其设置了宽度、高度和背景色。最后,使用 `::-webkit-scrollbar-thumb` 伪元素为拖条添加样式,为其设置了背景色和圆角。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值