当前位置:   article > 正文

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

css滚动条的消失和隐藏导致页面的抖动,有什么解决方法

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

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

    <div style=" padding-left: calc(100vw - 100%);">
         <div style="width: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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/771417
推荐阅读
相关标签