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

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. 将BufferedImage转换为InputStream,亲测可用

    private static final Logger logger = Logger.getLogger(Demo.class); /** * 将BufferedImage转换为InputStrea ...

  2. python的数字

    1.整数 与其它语言不同点两个乘号(**)代表 乘方运算 .前面代表底数,后面代表指数. 2.浮点数 它的小数位数可能是不确定的,需要注意 3.使用str()避免错误 在输出字符串时,可以避免类型错误 ...

  3. poj 3140 树形去边差异最小

    http://poj.org/problem?id=3140 依然是差异最小问题,不过这次是去边.思路是这样的,先记录每个点的子节点个数,然后遍历每个边. 有两个问题要注意: abs可能会出编译适配问 ...

  4. Python异常处理及元类

    一.异常处理 异常是错误发生的信号,一旦程序出错就会产生一个异常,如果该异常没有被应用程序处理,那么该异常就会跑出来,程序的执行也随之终止,也就是说异常就是一个事件,该事件会在程序执行过程中发生,影响 ...

  5. <Android开源库 ~ 1> GitHub Android Libraries Top 100 简介

    转载自GitHub Android Libraries Top 100 简介 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitH ...

  6. 一、Dapper基本操作

    参考资料:Cooper Liu 毒逆天 一.Dapper安装 添加引用-->NuGet管理-->搜索Dapper-->安装 二.新建表 --创建一个员工表 create table ...

  7. 多路复用select poll epoll

    I/O 多路复用之select.poll.epoll详解 select,poll,epoll都是IO多路复用的机制.I/O多路复用就是通过一种机制,一个进程可以监视多个描述符,一旦某个描述符就绪(一般 ...

  8. *15. 3Sum (three pointers to two pointers), hashset

    Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Find ...

  9. 【洛谷4717】【模板】快速沃尔什变换（FWT模板）

    点此看题面 大致题意: 有两个长度为\(2^n\)的数组\(A,B\),且\(C_i=\sum_{j⊕k==i}A_jB_k\)分别求出当\(⊕\)为\(or,and,xor\)时的\(C\)数组. ...

  10. vuejs生命周期函数

    生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单 ...