不知道大家在写 HTML 页面时有没有注意到这么一个小细节, 元素的滚动条会占据一定的内部空间的, 造成内容被挤压.
原来有滚动条和没滚动条时, 元素内部的空间是有变化的, 我的天啦...


一般情况下滚动条君(别什么事都怪我)不会给大家带来什么困扰.
但是如果我们纠结于这个细节, 不想在出现滚动条时, 内容被挤一下而造成界面"跳动".

那么我们就需要想一想如何解决这个困扰了.
假设有一个父级元素(限制高度)和一个内层子元素(块级元素), 子元素的内容增多产生溢出而出现(属于父元素的)滚动条.

* 子元素的宽度默认会撑满父元素的宽度
* 没有滚动条时
  子元素宽度 = 父元素宽度
* 有滚动条时
  父元素的有效宽度会变小

  父元素宽度 = 原父元素宽度 - 滚动条宽度

  
* 因此子元素重新调整宽度
  子元素宽度 = 原父元素宽度 - 滚动条宽度
* 此时子元素明显会因为宽度变小而重新调整布局, 所以发生了挤压.

明白了前因后果, 就很好找解决方案了.
只要预留出滚动条的空间, 让子元素的宽度在有滚动条和没有滚动条时不发生变化就可以了.

* 方式一: 限定内层元素的最大宽度以预留出滚动条的宽度
  实 现: max-width: calc(300px - 17px); /* 父元素宽度 - 滚动条宽度 */

* 方式二: 让内层元素的最小宽度占满父元素, 通过 padding 预留出滚动条的宽度
  实 现: min-width: 300px; /* 父元素宽度 */
          padding-right: 17px; /* 滚动条宽度 */
          box-sizing: border-box; /* 让元素宽度包含 padding, 否则元素会被滚动条遮挡 */

PS: 方式一和方式二的实现效果有细微的差别, 大家请根据实际需求来选择.

完整代码请参考: ignore-browser-scrollbar-width.html

最后, 其实滚动条君是无辜的(┬＿┬)

来自 https://www.douban.com/note/548331665/