安全街
一步步,我们的信息安全时代

最近在写一个垂直滚屏的页面,并遇到了一些问题。在这里记录一下解决过程和方法。

思路

查了一下网上的单页滚屏,遍地都是fullPage这个插件。因为是初学者,不太想用插件,又不太想用jQuery,只好自己想办法了。
目前的思路是把每一屏的内容套上div,隐藏滚动条,用js监听鼠标滚轮来进行锚点定位。
用CSS3来实现滚动效果。
这样会涉及到div自适应窗口大小的问题。目前的想法是用js获取窗口高度再赋值,宽度比较简单,直接100%就行。用window.resize监听。
这样把每一屏装进满屏的div里,用锚点来完成即可。
至于随意翻滚,把作为锚点的id名设为有规律的后缀1、2、3、4、5这样的数字的话js是可以做到随意操作的。

实践

几经思考,核心的锚点跳转还是屈服在了jQuery的淫威之下,因为原生js的锚点跳转太生硬了,平滑滚动效果太麻烦了。
$("html,body").animate({scrollTop: $(rollid).offset().top}, 1000);
滑动1s,其中rollid是锚点名,我很有规律的命名为roll1,roll2,roll3…
以下为主体代码:

var whichid=1; //这个变量是锚点名后缀的1,2,3…根据它的变化改变锚点
/* 判断是向上滑动还是向下滑动,firefox用detail,其他浏览器用wheelDelta,根据他们返回值的正负判断滚动方向,wheelDelta和detail的正负与上下滚的对应刚好相反 */
function upOrDown(e) {
    if ((e.wheelDelta<0 && whichid<rolls.length)|| (e.detail>0 && whichid<rolls.length)) { goTo(++whichid); }else if ((e.wheelDelta>0 && whichid>1) || (e.detail<0 && whichid>1)) {
        goTo(--whichid);
    }
}

//真正实现跳转
function goTo(rollid) {
    rollid="#roll"+rollid;
    $("html,body").animate({scrollTop: $(rollid).offset().top}, 1000);
}

这样便能实现跳转了。
需要监听鼠标滚轮事件,调用上面写的upOrDown函数,firefox又比较特殊了,和其他的不一样,所以才有if那个代码:

if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',upOrDown,false);
}
window.onmousewheel=document.onmousewheel=upOrDown;

我们还要撑开锚点div,另外我们还需隐藏滚动条,横向纵向都隐藏,不然页面滚的时候回鬼畜了一般的抖,也不好看,当然这些代码在页面加载的时候就要执行了,和滚轮时间屁关系没有:

document.documentElement.style.overflowX = "hidden";
//有人说隐藏Y轴滚动条失败,这里别用overflow-y,会把-解析成减,直接用overflowY即可。
document.documentElement.style.overflowY = "hidden";
for(var i=0;i<=rolls.length;i++) {
    rolls[i].style.width=parseInt(window.innerWidth)+"px";
    rolls[i].style.height=parseInt(window.innerHeight)+"px";
}

问题

下面到了关键部分,折腾我一下午的问题。其实以上代码已经可以实现单页平滑滚动了,但在chrome核的浏览器里会出现一个问题,那就是onmousewheel滚轮事件被触发两次或者多次。
上网搜都是千篇一律的答案,写得非常模糊,有的人干脆变成鼠标滚动两次再平滑滚动,这对其他浏览器不友好。
我自己想了一下,就是在 upOrDown函数里通过Date的getTime来计算goTo的触发时间,两次触发间隔小于1000毫秒(即1秒)不再触发,直接return。这彻底解决了所有问题。
下面我把所有代码贴上。
本人只是js菜鸟,请巨巨们直接无视。

var rolls=document.getElementsByClassName("pageroll");
function pageRoll() {
    document.documentElement.style.overflowX = "hidden";
    document.documentElement.style.overflowY = "hidden";
    for(var i=0;i<=rolls.length;i++) {
        rolls[i].style.width=parseInt(window.innerWidth)+"px";
        rolls[i].style.height=parseInt(window.innerHeight)+"px";
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',upOrDown,false);
        }
        window.onmousewheel=document.onmousewheel=upOrDown;
    }
}

var start=0,end=0;
var whichid=1;
function upOrDown(e) {
    end = new Date().getTime();
    if(end-start<1000) return;
    if ((e.wheelDelta<0 && whichid<rolls.length)|| (e.detail>0 && whichid<rolls.length)) { goTo(++whichid); }else if ((e.wheelDelta>0 && whichid>1) || (e.detail<0 && whichid>1)) {
        goTo(--whichid);
    }
}



function goTo(rollid) {
    start = new Date().getTime();
    rollid="#roll"+rollid;
    $("html,body").animate({scrollTop: $(rollid).offset().top}, 1000);
}

*本文为原创,作者T1dDl3R,首发于本博客。转载请注明

这篇文章还没有人发言,快抢第一!

发表评论