现在很多网页中都用到了滚屏的效果,这样的插件也不在少数,但我们不能只会用插件,还要了解一下他的原理。
下面我就来说说 我自己对滚屏的理解。
页面滚动的前提是有滚动条,那什么时候才会有滚动条那,就是页面里的高度超出你窗口的高度时就会出现纵向滚动条,横向的也是同样的道理。
在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的值 前提是你得是绝对定位或相对定位,这就要却绝于你的布局了。当然除此之外还会有别的方法,只是我不知道而已。
以上纯属个人见解,如有错漏 。还请指正!