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

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

    <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. Git 爬坑路(从小白开始入门) ——（1）

    通过git管理项目之前,需要先注册一个GitHub账号,方便在远程仓库进行项目管理. Git之项目在本地仓库的管理(从小白开始): 一.push到远程项目 1.在个人的GitHub账号中,创建一个远程 ...

  2. iOS进阶之正则表达式

    最近一直在弄正则表达式,于是在这里整理一下,便于日后查阅. 1.常用符号 ^:字符串的开始 $:字符串的结束 *:表示零个或若干个 ?:表示零个或一个 +:表示一个或若干个 | :表示 或 操作 . ...

  3. 微信小程序表单验证

    参考:http://www.cnblogs.com/zhangxiaoyong/p/10166951.html

  4. win10配置java开发环境

    安装java(JDK) Oracle官网下载地址 选择JavaSE > Downloads 选择最新版本 > Download Accept License Agreement 选择要下载 ...

  5. 解决 Cannot get IBus daemon address 问题

    参考: Cannot get IBus daemon address 解决 Cannot get IBus daemon address 问题 在 Ubuntu 14.04 系统下使用 TexMake ...

  6. 基于Ocelot的gRpcHttp网关

    什么是gRpcHttp网关 通俗的讲就是将gRpc提供的服务以rest api的形式提供出去,不需要再单独的写一个webapi去做这件事. gRpcHttp网关好处 减少不必要代码,减少中间层提高通讯 ...

  7. Jenkins去GitLab拉取Java代码自动打包

    jenkins的部署 一.部署git 1)先检查系统是否已经自带了git,如果有,就卸载 $ rpm -qa | grep git && rpm -e git --nodeps 2)开 ...

  8. HTML5外包团队 更新一下2019最新案例

    本项目控件均为动态加载,3D部分使用Unity3D,其它基于ReactJS,NodeJS,部分使用cocos2D,由于项目涉密,只能发部分截图,欢迎联系索取更多案例,企鹅号 372900288 祝大家 ...

  9. 给video添加自定义进度条

    思路: 1.进度条,首先要知道视频的总长度,和视频的当前进度,与其对应的便是进度条的总长度和当前的长度,两者比值相等 2.获取视频的总长度(单位是秒),获取当前进度 3.要实现的功能,首先是进度条根据 ...

  10. Error: listen EADDRINUSE :::3000

    解释:端口已被占用 解决方法: 修改本服务要用的端口.如 3001 停止 3000 端口. lsof -i:3000 # 查看 3000 端口被占用情况 kill -9 xxx PID 为上调命令查看 ...