css控制滚动条的出现隐藏导致的页面闪动的问题

之前这些小细节都在实践的时候给忽视了,或者都动态加载,框架的使用等因素的隐藏,变得不那么容易出现。

今天看到张鑫旭大牛的微博,觉得记录一下这个小问题的解决方案

    <div style=" padding-left: calc(100vw - 100%);">
         <div style="1200px;background:#ccc;height: 1000px;margin:0 auto;"></div>
    </div>

加了这句话就不会出现闪动问题,因为这样计算左边总会预留出来滚动条的宽度回没有滚动条为0;

100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内

100%是可用宽度,是不含滚动条的宽度。但是calc还是有兼容问题,支持主流浏览器,记得加上内核使用。

原文地址:https://www.cnblogs.com/liliy-w/p/10148089.html