问题描述：页面首次加载的时候内容是一屏，不会出现纵向滚动条，但是当点击加载的内容更多时页面会出现左右跳动一下的情况。出现跳动的主要原因就是出现了滚动条，滚动条的宽度影响了内容区域的宽度。

1.查看导航条的宽度可以在控制台运行：window.innerWidth - document.body.clientWidth

window.innerWidth 浏览器可用宽度

document.body.clientWidth body的宽度

Chrome浏览器，Firefox，IE的导航条宽度都是17px.

所以可以给内容区设置一个padding站位，padding-right:17px;这样页面就不会来回跳动了。

2.直接给body设置body { overflow-y: scroll; }

css页面出现滚动条左右跳动的更多相关文章

  1. css页面去除滚动条

    注:滚动条是导致页面切换标签页闪动的原因 html{ /*隐藏滚动条,当IE下溢出,仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ overflow:-m ...

  2. 使用CSS实现无滚动条滚动

    我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放 ...

  3. CSS 页面布局、后台管理示例

    CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...

  4. CSS 实现隐藏滚动条同时又可以滚动（转）

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  5. CSS怎么隐藏滚动条(三种方法)

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  6. js 页面无滚动条添加滚轮事件

    当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...

  7. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  8. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  9. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

随机推荐

  1. H-ui出现提交后没办法关闭

    可以用sublime代替服务器来解决,或者是webstorm可以自行搭建服务器来解决当前的问题. sublime可以更改端口号 自己加上一个服务器 默认打开浏览器的 “快捷键”

  2. webConfig中<customErrors>节点配置

    发布在远程计算机上的网站调试问题: 通常情况下我们会设置错误页,不让用户看到错误信息 这种WebConfig的配置方法是: <configuration> <system.web&g ...

  3. springboot微信支付,支付二维码生成

    https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 微信扫码支付开发者文档,里面会有支付流程的教程 接口链接 URL地址:htt ...

  4. yield关键字的使用

    yield的中文是什么意思呢? 在金山词霸上面的翻译是: vt.屈服,投降: 生产: 获利: 不再反对 vi.放弃,屈服: 生利: 退让,退位 n.产量,产额: 投资的收益: 屈服,击穿: 产品 个人 ...

  5. npm package.json字段全解

    name 在package.json中最重要的就是name和version字段.他们都是必须的,如果没有就无法install.name和version一起组成的标识在假设中是唯一的.改变包应该同时改变 ...

  6. js屏蔽鼠标操作

    document.body.onselectstart=document.body.oncontextmenu=function(){ return false;}

  7. canvas的globalAlphaAPI

    canvas的globalAlphaAPI

  8. u-boot分析（六）----时钟初始化

    u-boot分析(六) 上篇博文我们按照210的启动流程,分析到了关闭看门狗,今天我们继续按照u-boot的启动流程进行分析,今天我们会主要分析时钟的初始化. 今天我们会用到的文档: 1.       ...

  9. 浅谈SQL Server中的事务日志(二)----事务日志在修改数据时的角色

    简介 每一个SQL Server的数据库都会按照其修改数据(insert,update,delete)的顺序将对应的日志记录到日志文件.SQL Server使用了Write-Ahead logging ...

  10. Spark Streaming与Kafka集成

    Spark Streaming与Kafka集成 1.介绍 kafka是一个发布订阅消息系统,具有分布式.分区化.多副本提交日志特点.kafka项目在0.8和0.10之间引入了一种新型消费者API,注意 ...