jQuery scrollTop在iOS上的iframe内部无法正常工作 [英] jQuery scrollTop not working inside iframe on iOS

问题描述

iOS和iframe ..这样的痛苦。
我有一个简单的返回顶部按钮，它应该为滚动设置动画（而不是仅仅跳到页面顶部）。

iOS and iframes.. such a pain. I've a simple back to top button which should animate the scrolling (instead of just jumping to the top of the page).

$(document).on('click touchstart', '.backtotop', function() {
    $('html, body').animate({ scrollTop: 0 }, 1500);
});

除iOS上的iframe外，这种方法无处不在。我还没有完全理解iOS如何处理iframe。 jQuery的.scrollTop（）函数也不起作用（无论如何也无法动画）。

This works everywhere, except for iframes on iOS. I still haven't fully understood how iOS handles iframes. jQuery's .scrollTop() function won't work either (which can't be animated anyway).

在iOS上iframe中唯一有用的是：

The only thing which works in iframes on iOS is this:

parent.self.scrollTo(0, 0);

显然不是最佳解决方案，因为这不适用于桌面浏览器。
非常感谢任何有关如何在iOS上修复此问题或iframe的更深入知识。

Obviously not the best solution since this won't work for desktop browsers. Any deeper knowledge on how to fix this or iframes on iOS in general is greatly appreciated.

推荐答案

似乎具体化上下文修复了这个问题：

Seems like specificing the context fixes the issue:

$('body, html', parent.document).animate({ scrollTop: 0 },1500);

因为这只适用于iOS我已经包含来自此主题：

Since this will only work for iOS I've included the iOS detect from this thread:

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

$(document).on('click touchstart', '.backtotop', function() {
    if (iOS) {
        $('html, body', parent.document).animate({ scrollTop: $("body").offset().top},1500,"easeOutQuart");
    } else {
        $('html, body').animate({ scrollTop: $("body").offset().top},1500,"easeOutQuart");
    }
});

显然只有 parent.document 作为上下文。 parent.window 或仅文档无效。

Apparently only parent.document works as the context. parent.window or only document have no effect.

这篇关于jQuery scrollTop在iOS上的iframe内部无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！