Anchors losing click ability after scroll on iOS Safari

问题

Using this to pick up clicks:

$("nav li a").click(function(event) {
    event.preventDefault();
    target = $(this).attr("href").replace('#', '');
    goToByScroll(target);
});

And this is the scroll function:

function goToByScroll(id) {
    $('html, body').animate({
        scrollTop: $("#"+id).offset().top - totalHeight 
    }, 'slow');
}

The first click works but after that the links aren't clickable/active unless the page is manually scrolled. Any ideas?

回答1:

Under further investigation with an iOS man, we have discovered it is a bug in Safari on iOS5.

I tried this;

// $('html,body').animate({ scrollTop: scrollto + 'px' }, 'slow')
window.scroll(0,0);

And saw it actually drew the fixed header further down the screen. With the click working.

So I swapped the code back, and although it drew the header correctly at the top, the active click area was still further down the page, though was invisible, was clickable.

Seems they have resolved it testing on iOS6.

I exhausted all kinds of CSS and DOM manipulation, removing, and re-inserting a new header area... nothing works.

So I am 99% sure to post this an THE ANSWER. lol. Though I realise that doesn't help you.

回答2:

There are a number of factors that could be in play here, most not involving the code that you have linked. For the click to not work:

The click event is being cleared
The element you are trying to click is covered by another (likely transparent) element
The clickable area of your element is displaced or malformed

For the first possibility to be the issue, your element would have to remain unclickable until a refresh or until you recreate the click handler. Check that the click handler isn't being built more than once. You can do this by setting up a breakpoint or an alert/console statement at the point of your call to $(element).click(function() { ... }).

For the second possibility to be the issue, another element would need to be present on top of your clickable element. This can be checked by using a browser or browser extension that allows you to right-click an element an inspect it. If the element that gets inspected is not your clickable element, this is likely the issue.

For the third possibility to be the issue, you would have to check the position, size, and shape of the clickable element while it is unclickable. Use your browser or browser extension to select and highlight the element on the page. Look at where it is being shown, what dimensions it has, what it's z-index evaluates to, what display properties it has (display: inline is notorious for causing issues with clickability), and if it is even "actually" in the current viewport.

In short, the code that you've posted says next to nothing about what could be going on, so you need to do more debugging or provide more code.

来源：https://stackoverflow.com/questions/9378527/anchors-losing-click-ability-after-scroll-on-ios-safari

标签

jquery

ios

mobile-safari