浏览器滚动条及其影响 calc()

1.浏览器滚动条

默认风格各异，推荐一插件  mCustomScrollbar

不考虑兼容也可自定义样式    链接二

2.影响

以垂直方向为例，当内容变化的时候，如果设置的是overflow：auto，则可能出现滚动条有无场景切换，俗称内容‘’闪动‘’。

此‘闪动’，轻则内容晃动，重则影响到其他参数获取（比如你用一个插件，要获取一个通过百分比设置宽度的容器宽度，那么，你获取的值是不稳定的，所以，基于此宽度计算的其后一切都存在问题）

解决方式一：设置overflow：scroll，也就是说不管内容有没有超出，右侧会有个滚动条（彻底消除滚动条出现影响），功能没问题就是影响美观，当然，如果内容必然超出，那影响忽略。

解决方式二：高版本浏览器支持的css3（原理就是通过获取到的容器内部包括滚动条的宽度减去可用宽度得到滚动条宽度，设置此宽度为一个间距，抵消可能出现的滚动条即可）

.wrap { margin-left: calc(100vw - 100%); }

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

3. calc()     动态计算长度值

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；