iOS Safari：固定位置元素内的锚点只能工作一次 [英] iOS Safari: Anchors within a fixed positioned element only work once

问题描述

请观看这个小提琴： http://fiddle.jshell.net/ikmac/q7gkx

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

Use this link to test in the browser: 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中发生的情况固定）：

This is what happens in Safari on iOS 5.0 (4.3 doesn't support position fixed):

第一次点击其中一个锚点时，页面跳转到正确的锚点。之后，我不能再点击其他链接了。

The first time I click on one of the anchors the page jumps to the correct anchor. After that I cannot click one of the other links anymore. When I scroll up or down a bit the links become clickable again.

所有其他桌面浏览器的行为都很好。

All other desktop browsers behave fine.

推荐答案

我也有这个问题。我有一半解决它，让javascript做导航的nav滚动时单击nav锚点。因为正常的触摸滚动不会给出事件，直到手指放开屏幕，我使用position：fixed，这使得触摸滚动比javascript更好，参见 apples dev-site 。

I have that problem aswell. And I kind of half solved it by letting javascript do the scrolling of the nav when a nav anchor is clicked. And because normal touch-scrolling does not give an event until the finger lets go of the screen, I use position:fixed which makes the touch-scrolling nicer than javascript can, see apples dev-site.

这不是最终的解决方案，但在我看来，它比没有工作更好。此脚本还检查窗口的宽度，以确保它只适用于较小的屏幕，设备。

It is not the ultimate solution, but in my opinion it is better than not working at all. This script also checks the width of the window to make sure that it only applies this to smaller screens, well, devices.

这是我的代码，如果你找到它有用，更好或找到更好的解决方案，请分享：）

Here is my code, and if you find it useful, make it better or find a better solution, please share :)

/* 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

I use this solution on a project page, try it out: dare.niklasek.se

这篇关于iOS Safari：固定位置元素内的锚点只能工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！