CSS设计之页面滚动条出现时防止页面跳动的方法

一、解决水平居中布局与滚动条跳动的千年难题

在当前的web界，绝大部分页面布局采用的是水平居中布局，这种布局方式简单且有效。以淘宝首页为例，其主体部分通过设定宽度，再利用margin: 0 auto实现水平居中。

这种布局方式存在一个影响用户体验的问题。现代浏览器的滚动条默认为overflow:auto类型，即当内容超过一屏时，滚动条才会出现。但在信息流页面如新浪微博中，内容从上往下逐步加载，开始时页面高度有限，没有滚动条，随着更多内容的显示，滚动条出现，会导致页面主体产生跳动。在JS交互中，当用户点击“加载更多”时，内容超过一屏，滚动条出现，也会导致页面主体跳动。

针对这种体验问题，一般有两种解决方法。对于高度尺寸不确定的页面，如新浪微博，可以使用CSS的body { overflow-y: scroll; }来解决。而对于高度确定的页面，如淘宝首页，可以通过搭好页面尺寸布局骨架，再填充内容的方式，避免滚动条出现时的跳动。这些方法只适用于特殊定制的页面，对于高度随内容而定的页面，如知乎，这些方法并不适用。

二、利用CSS3的计算calc和vw单位实现滚动条出现页面不跳动

有一种更为巧妙的方法可以解决这个问题，只需要一行CSS代码即可：

.wrap-outer { margin-left: calc(100vw - 100%); } 或者 .wrap-outer { padding-left: calc(100vw - 100%); }

这样就可以实现页面出现滚动条时不会跳动的效果。这里的.wrap-outer指的是居中定宽主体的父级元素。calc是CSS3中的计算功能，IE10+的浏览器都支持。100vw代表浏览器的内部宽度，包括滚动条的宽度。而100%则是页面的可用宽度，不包括滚动条的宽度。calc(100vw - 100%)就是浏览器滚动条的宽度。通过这种方式，主体内容可以永远居中于浏览器，无论滚动条是否出现，都不会产生跳动。

针对窄屏幕宽度的情况，上述CSS方案可能会有一点瑕疵。在浏览器宽度较小的情况下，左右两侧留出的空白可能会与页面内容比例失衡。可以通过响应式设计来优化这个问题。例如，在屏幕宽度大于1150px的情况下应用上述CSS规则。

通过利用CSS3的计算功能和vw单位，我们可以实现滚动条出现时页面不跳动的效果，提升用户体验。这种方法的兼容性支持IE9+以及其他现代浏览器。在实际应用中，可以根据页面需求进行灵活调整和优化。