滚屏那些事

   现在很多网页中都用到了滚屏的效果，这样的插件也不在少数，但我们不能只会用插件，还要了解一下他的原理。

下面我就来说说 我自己对滚屏的理解。

   页面滚动的前提是有滚动条，那什么时候才会有滚动条那，就是页面里的高度超出你窗口的高度时就会出现纵向滚动条，横向的也是同样的道理。

在javascript里有一个scrollTop的属性 指的是滚动条的垂直坐标，也就是现在滚动条的纵向位置，我们可以随便打开一个有滚动条的网站 -->f12 -->console

输入 document.body.scrollTop-->回车

是不是就看到显示 0 因为你还没滚动 他的坐标是0,你滚动一下后 在来执行一下 他的坐标就发生改变了

var scrollToPage = function(page){
//右侧指示
$pageNaveLi.eq(page).trigger('click', {trigger:'scroll'});
//顶部指示
var topPage = page < 7 ? 1 : page;
$('#d_topnav2_ul>li[data-gotopage="'+topPage+'"]').addClass('active').siblings().removeClass('active');

window.location.hash = 'page-' + (page+1);
var scrollLock = false;
$('html,body').stop().animate({
scrollTop : $pages.eq(activePage).offset().top
},2000,'easeOutBack',function(){
if(scrollLock)return;
scrollLock = true;
//if(activePage == 3){
//console.log("要执行第" + activePage + "屏幕了");
//}
pageModes[activePage + 1].play();
pageModes[activePage + 1].startCss3();

if(prevActivePage != activePage ){
pageModes[prevActivePage + 1].stop();
pageModes[prevActivePage + 1].stopCss3();
}
});

上面的这段代码是封装了一个滚屏的方法,因为我们都知道滚屏一般情况下 都会有对应的选项卡来跳到不同的屏，

所以我们给了这个方法一个参数，就是要跳到哪一屏。

然后取到每一屏的高度*索引  就是你要设置的scrollTop的值,如果我们直接给他一个值，他就会刷一下过去，这样对用户体验不友好，你可以给他加个动画，让他有个过度过程。

OK，既然我们有滚屏了 ，你可以overflow: hidden;将默认的浏览器滚动条隐藏掉。

当然滚屏不光只有这一种办法，比如还可以改变TOP的值 前提是你得是绝对定位或相对定位，这就要却绝于你的布局了。当然除此之外还会有别的方法，只是我不知道而已。

以上纯属个人见解，如有错漏 。还请指正！