• 好久没更新内容因为不知道写啥 ,说一下写网页遇到的一个坑

    这是一个 fullPage.js 的 demo ,在 Safari Mobile 下,只要滑到第三个页面,就无法再返回去

    经过几次测试之后,发现 Safari 的以下几个特性:

    1. 如果 cursor 不是 pointer ,就无法收到 touch 或者 click 事件,只会进行滚动
    2. 如果 body 的 overflow 是 hidden ,一旦滚动就会在上下显示白边。

    所以需要对代码进行小 hack,先判断浏览器类型

    var isSafariMob = 0;
    
    if(navigator.vendor && navigator.vendor.indexOf("Apple") > -1 && navigator.userAgent.indexOf("iPhone OS") > 0){
        isSafariMob = 1;
    }
    

    然后在 fullPage.js 的 593 行找到

    css(document.body, {
        'overflow': 'hidden',
        'height': '100%'
    });
    

    替换为

    if(isSafariMob) {
        css(document.body, {
            'overflow-y': 'scroll',
            'height': '100%'
        });
    }else{
        css(document.body, {
            'overflow': 'hidden',
            'height': '100%'
        });
    }
    

    body 可滚动之后,还需要设置 cursor 为 pointer

    var sections = document.getElementsByClassName(".section");
    
    for(var i=0;i<sections.length;i++){
        sections[i].style.cursor = "pointer";
    }