使用动画链（jQuery）在 Ipad 上的 ScrollLeft 和 ScrollTop

Posted 2023-03-12

【中文标题】使用动画链（jQuery）在 Ipad 上的 ScrollLeft 和 ScrollTop

【英文标题】：ScrollLeft and ScrollTop on Ipad using animate chain (jQuery)

【发布时间】：2012-03-28 23:27:47

【问题描述】：

我一直在努力理解为什么我的代码在每个最新的浏览器上都能正常工作，而不是在 iPad 上，它只工作了一半。

首先，这是我正在努力开发的网站：http://madovar.com

我正在尝试，当我点击顶部的联系我们链接时，滚动到右侧然后滚动到底部，使用来自 jQuery 的动画，它在 FF、IE8+ 和 chrome、safari 中运行良好。

但是当我使用 iPad 时，它会像预期的那样向右移动，然后开始向下滚动一点并直接向左移动，然后将向下滚动动画到我的代码的空白部分。

这是我的脚本：

jQuery(document).ready(function($) 
$('.contact').bind('click', function (event)  

$('html, body').animate(
scrollLeft: "+=2200"            
, 1500, 'easeInOutExpo').delay(400).animate(
scrollTop: "+=2000"         
, 3000, 'easeInSine');         
event.preventDefault();

);
);

请帮帮我，我已经在 Internet 和 *** 上搜索了这个。

谢谢

【参考方案1】：

我最近遇到了这个问题。显然 Mobile Safari 中存在一个错误，它不允许在 body 或 html 元素上对 scrollTop 和 scrollLeft 进行动画处理。我在另一个 *** 答案中找到的跨浏览器修复（现在找不到链接）：

var left;
$('body,html').stop().animate(pageYOffset: topValue, pageXOffset: leftValue, 
    duration: 500,
    easing: 'swing',
    step: function(now, fx) 
        if (fx.prop == 'pageXOffset') 
            left = now;
         else if (fx.prop == 'pageYOffset') 
            window.scrollTo(left, now);
        
    
);

在这里发布，以防其他人将来偶然发现这个问题。

【讨论】：

我只是遇到了这个解决方案最奇怪的问题：window.scrollTo 仅在窗口当前在 ios 上的 Safari 6 中位于顶部 0 时才有效。如果我手动执行 window.scrollTo(0)我可以跳转到 window.scrollTo(100) - 但不能更进一步..

【参考方案2】：

我在视口的元标记中看到了一些由语法引起的错误。如果您使用 Chrome 开发人员工具检查您的页面，您也应该会看到错误。您的元标记应如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

注意，正确的语法在内容属性的值之间使用逗号而不是分号。解决此问题可能会解决您在 iPad 上的问题。

【讨论】：

嗯，我用逗号试过了，还是有同样的问题。谢谢回复。还有其他想法吗？

@Triben 您应该查看this 答案。我快速搜索了“jquery ipad 滚动问题”并遇到了它。让我知道为页面主体以外的其他内容设置动画是否适合您。希望这会有所帮助。