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

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

    <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还是有兼容问题，支持主流浏览器，记得加上内核使用。

css控制滚动条的出现隐藏导致的页面闪动的问题的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. CSS 控制滚动条样式

    /*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...

  3. CSS - 控制最后边框的隐藏或设置为none

    div{       width: 20%;       border-left: 1px solid $border-color;       &:nth-child(5n+1){      ...

  4. CSS控制文本超出后隐藏并用省略号代替

    一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...

  5. CSS控制滚动条的样式

    到今天(2018年10月25日)为止, 这还是chrome上的一个实验性特性: ::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollb ...

  6. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

  7. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  8. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  9. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

随机推荐

  1. mysql_study_4

    索引 ALTER TABLE 表名字 ADD INDEX 索引名 (列名); CREATE INDEX 索引名 ON 表名字 (列名); 索引的效果就是加快查询速度,当表中数据不够多的时候是感受不出他 ...

  2. 本地访问虚拟机redis

    1.开放端口号6379 iptables –I INPUT –p tcp –-dport 6379 –j ACCEPT 2.修改redis.conf 配置文件 ①修改redis绑定IP为虚拟机IP地址 ...

  3. Emote木马分析

    前言:网上找的样本是EXE的,没有邮件样本,所以只做了exe分析. 一.Emote木马相关信息 文件: C:\Users\Desktop\Samp.exe 大小: 249856 bytes 文件版本: ...

  4. class的真相

    Java中Class类及用法 Java程序在运行时,Java运行时系统一直对所有的对象进行所谓的运行时类型标识,即所谓的RTTI.这项信息纪录了每个对象所属的类.虚拟机通常使用运行时类型信息选准正确方 ...

  5. 你不知道的JS（2）深入了解闭包

    很久之前就想写一篇关于闭包的博客了,但是总是担心写的不够完全.不够好,不管怎样,还是要把我理解的闭包和大家分享下,比较长,希望耐心看完. 定义 说实话,给闭包下一个定义是很困难的,原因在于javasc ...

  6. Codeforces 1027F Session in BSU - 并查集

    题目传送门 传送门I 传送门II 传送门III 题目大意 有$n​$门科目有考试,第$i​$门科目有两场考试,时间分别在$a_i, b_i\ \ (a_i < b_i)​$,要求每门科目至少参加 ...

  7. iOS SDWebImage知识点

    1.clear 和 clean clear 先把之前的缓存文件夹删除掉,然后新建一个文件夹 clean 先删除过期的文件,然后计算剩余缓存文件的大小 currentSize > maxSize, ...

  8. Javascript 中的数据类型判断

    (迁移自旧博客2017 09 25) typeof 我们常使用typeof来判断数据类型,在常规场景中足以应付数据类型判断的需要: var obj = { name: 'zhangxiang' }; ...

  9. Sonar 配置及部署（Linux系统）

    之前在windows系统上部署了sonar代码审查,由于工作需要,需要在Linux环境再部署一套. 其实,部署的大体都是大同小异的,这里罗列下各个配置,与windows部署不同的地方会重点说一下. 数 ...

  10. vue ui 启动，浏览器报错Unexpected token <

    可能的解决办法: 选择清空缓存并硬性重新加载页面. 如果不行,全局卸载@vue/cli,重新安装.