html - iOS 浏览器 : Anchors within a fixed positioned element only work once

Question

请看一下这个 fiddle :http://fiddle.jshell.net/ikmac/q7gkx

使用此链接在浏览器中进行测试:http://fiddle.jshell.net/ikmac/q7gkx/show/

HTML:

<div class="nav">
    <a href="#test1">test1</a>
    <a href="#test2">test2</a>
    <a href="#test3">test3</a>
</div>

<div id="test1" class="test">test1</div>
<div id="test2" class="test">test2</div>
<div id="test3" class="test">test3</div>

CSS:

.nav {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: #000;
}

.nav a {
    float: left;
    font-size: 20px;
    color: #fff;
}

#test1 {
    margin-top: 1000px;
    height: 1000px;
    background: red;
}

#test2 {
    height: 1000px;
    background: blue;
}

#test3 {
    height: 1000px;
    background: green;
}

这是在 iOS 5.0 上的 Safari 中发生的情况(4.3 不支持位置固定):

我第一次点击其中一个 anchor 时，页面会跳转到正确的 anchor 。之后，我无法再单击其他链接之一。当我向上或向下滚动一点时，链接会再次变得可点击。

所有其他桌面浏览器都表现良好。

有没有人以前遇到过这个问题或知道如何解决它？

Answer 1

我也有这个问题。我通过让 javascript 在单击导航 anchor 时滚动导航来解决了一半问题。因为正常的触摸滚动在手指离开屏幕之前不会产生事件，所以我使用 position:fixed 这使得触摸滚动比 javascript 更好，参见 apples dev-site .

这不是最终的解决方案，但在我看来，这总比根本不起作用要好。此脚本还会检查窗口的宽度，以确保它仅将其应用于较小的屏幕，嗯，设备。

这是我的代码，如果您觉得有用，可以改进它或找到更好的解决方案，请分享:)

/* NAV POSITION */

var specScroll = false; // If special scrolling is needed

/* Check what kind of position to use.*/
(function navPos() {
    var width = checkWidth();

    if (width <= 480 || navigator.userAgent.match(/iPad/i) != null) {
        specScroll = true;
    }else{
        specScroll = false;
        window.onscroll = NaN;
    }
})();

$(window).resize( function(){ navPos(); } ); // After resizing, check what to use again.


/* When clicking one of the nav anchors */
$(function() {
    $('a').bind('click',function(e){
        var $anchor = $(this);

        if(specScroll){
            $('#nav').css('position', "absolute");
            window.onscroll = anchorScroll;
        }
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 700,'easeOutExpo', function(){
            if(specScroll){setTimeout("window.onscroll = touchScroll;", 100);} 
            // the set timeout is needed for not overriding the clickability of the anchors after anchor-scrolling.
        });

        e.preventDefault();
    });
});

/* While the user clicks and anchors in nav */
function anchorScroll() { $('#nav').css('top', window.pageYOffset); }

/* the first time the user scrolls by touch and lift the finger from screen */
function touchScroll() { 
    $('#nav').css('position', 'fixed');
    $('#nav').css('top', 0);
    window.onscroll = NaN;
}

/* CHECK WIDTH OF WINDOW */
function checkWidth() {
    myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth;    //Non-IE
    } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
        myWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
    } else if( document.body && ( document.body.clientWidth ) ) {
        myWidth = document.body.clientWidth;    //IE 4 compatible
    }
    return myWidth;
}

我在一个元素页面上使用这个解决方案，试试看:dare.niklasek.se