解决滚动条出现时水平居中元素的margin自动抖动问题

在很多高度不固定的网页中,当内容高度足够用一屏进行展示时,不会出现滚动条,而当内容高度高于一屏时,浏览器右侧就会出现滚动条。滚动条的宽度会影响页面的可用宽度,这时候,使用 margin: 0 auto; 来居中的元素就会导致 margin 的自动变化,从而引起元素位置的抖动。

要想解决抖动问题,让元素在有无滚动条的条件下都处于同一个位置,有几种解决办法。

1. 使用 overflow:scroll 解决

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

这种方法让内容高度无论是否超过一屏滚动条始终都会出现,这样就不存在滚动条出现前后可用宽度不统一的问题,也就不会造成 margin 的自动变化引起元素位置抖动。
很多人不喜欢在不需要滚动条时多出来一个滚动条,就要用到第二种方法了。

2.使用 calc 解决

1
2
3
Html{
padding-left: calc(100vw - 100%);
}

这种方法使用 calc 计算出一个滚动条的宽度,用 margin 或者 padding 占用,其中 100vh 是包括滚动条宽度的浏览器内部宽度,100% 则是实际可用宽度。在出现滚动条时,相当于左右两侧都出现了滚动条宽度,从而使水平居中的元素仍然保持水平居中。

参考链接:

本文结束,感谢阅读,如果对您有所帮助,不妨打赏支持一下!