在业务中，页面滚动的场景十分常见，

因此对于滚动的充分了解，可以让我们提高开发的效率！

滚动的几种场景

• 只有window窗体滚动
• 内滚动布局
• 窗体滚动+DIV内滚动

这时候，台下观众会问，什么是内滚动布局，什么是window滚动呢？

让我们来了解下哈

只有window窗体滚动

即页面只含有浏览器窗体默认的滚动条，窗体滚动条随页面内容而不断增长。

如手Q吃喝玩乐的站点首页， 在 android机 上就是使用window滚动

内滚动布局

什么是内滚动布局呢？ 个人认为，内滚动布局就是主滚动条是在页面内部，而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。

（具体为什么ios上和android上会使用不同的滚动方式，可以去了解下=。=）

内滚动布局什么时候会使用了？

• ios 页面顶部带有fixed输入框（解决软键盘弹出导致页面错位的问题）

例如，手Q吃喝玩乐的站点首页， 在 ios机 上便是内滚动布局

• 桌面软件或者客户端，如群活动

• 管理系统也有经常使用

窗体滚动+DIV内滚动

这种场景就是，两者都会出现，故计算滚动时最为复杂、

滚动计算基础知识

由于不同浏览器其窗体滚动条的属性获取方式有所差异，故考虑兼容性，我们假设使用了场景是移动到，并且使用了zepto的库

首先，我们想要更好的操作控制条，需了解两个地方

• 滚动条属性
• 滚动条调用方法

var $scrollTarget = $(".ui-page");
//若为控制window滚动条
var currenY = $(document.body).scrollTop()； //当前window纵向滚动的位置
var currenX = $(document.body).scrollLeft()； //当前window横向滚动的位置
var Y = 想滚动到的垂直位置；
var X = 想滚动到的水平位置；
$(window).scrollTop(Y)；
$(window).scrollLeft(X)；
//若为页面内节点的滚动条
var currenY =$scrollTarget.scrollTop()； //当前scrollTarget纵向滚动的垂直位置
var currenX = $scrollTarget.scrollLeft()； //当前scrollTarget横向滚动条的位置
$scrollTarget.scrollTop(Y)；
$scrollTarget.scrollLeft(X)；

我们可以发现 在这里window滚动比较特殊

其获取滚动属性是用 document.body这个对象，而调用滚动条滚动方法是用window的对象 （不同浏览器其获取浏览器窗体滚动条的方式也存在着差异，大家可以去了解下）

接下来，我们了解下几个重要的属性值

//当前window可视内容区域宽高: 
window.innerWidth
window.innerHeight
//浏览器滚动条偏移值:
$(document.body).scrollTop();
//节点offset值
$("#div").offset().top;
$("#div").offset().left;
//节点的宽高
$("#div").height();
$("#div").width();
//节点的滚动条偏移值
$("#div").scrollTop();

现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值，那么我们来做一个需求把

假设是这个页面

需求描述 ： 希望通过点击按钮，使绿色区域的item，能够定位到屏幕中间

这种需求很常见吧~

那么我们先分析下页面， 可以从页面中看出，这个是一个内滚动布局单页页面。

//相信我们js代码就是这样写的
var itemHeight = 每个item的高度
var itemIndex = 指定item的下标(1, 2,3 ...)
var rightPosY =  itemHeight * itemIndex //使绿色区域的item能滚动到列表可视区域的中间的偏移值；