iOS的Safari浏览器：固定定位的元素内锚只能使用一次

请看看这个小提琴：http://fiddle.jshell.net/ikmac/q7gkx iOS的Safari浏览器：固定定位的元素内锚只能使用一次

使用此链接的浏览器测试：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; 
}

这就是在Safari上发生的事情iO S 5.0（4.3不支持位置固定）：

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

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

有没有人曾经有过这个问题，或知道如何解决它？

来源

2011-11-01 Stuiterbal

我也有这个问题。而我通过让点击导航锚点的时候让javascript来滚动nav来解决它。并且由于在手指放开屏幕之前正常的触摸滚动不会产生事件，所以我使用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; 
}

我使用项目页面上该解决方案，尝试一下：敢.niklasek.se

来源

2011-11-11 00:46:36 nikek

我遇到了同样的问题，使用固定的位置导航，使用jQuery动画在页面上滚动用户。我发现，即使固定位置元素在新位置可见，用js检查它仍然返回到原始位置，直到用户手动移动屏幕。在那之前，即使导航在视觉上存在，但为了与之交互，它也不能被触及。更多信息和演示在这里：http://bit.ly/ios5fixedBug

来源

2012-04-10 18:51:01

iOS的Safari浏览器：固定定位的元素内锚只能使用一次

回答

相关问题