如何以编程方式在 iPad 上滚动窗口？答案

【问题标题】：How to programmatically scroll window on iPad?如何以编程方式在 iPad 上滚动窗口？
【发布时间】：2013-02-21 21:20:03
【问题描述】：

我的应用程序包含几个以编程方式滚动到页面上特定元素的功能。不幸的是，它不适用于 Safari/iPad。我尝试了以下滚动方法：

window.scroll(0, y);

window.scrollTo(0, y);

$(window).scrollTop(y);

$('html, body').animate({
    scrollTop: y
});

是否根本不可能以编程方式在 Safari/iPad 上滚动窗口，或者我只是做错了？所有这些方法都适用于我在 PC 上测试的所有浏览器。

【问题讨论】：

你检查了这个答案吗？ stackoverflow.com/questions/19929197/…
@KostasSiabanis - 我尝试了这种方法但没有成功（注意：我不是 OP）。

标签： javascript ipad safari scroll

【解决方案1】：

我还没有找到在 iPad 上以编程方式滚动窗口的方法。一种可能的解决方法是将页面内容包装在固定的 div 容器中，并通过更改 div 的 scrollTop 属性来滚动它。您可以在this codepen 中看到该方法。我在 iPad 上使用 Safari 和 Chrome 以及在 Windows 上使用 Firefox、Chrome 和 IE11 成功测试了它。

HTML

<div id="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    ...
</div>

CSS

div#container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
div {
    height: 100px;
}
.div1 {
    background-color: red;
}
.div2 {
    background-color: green;
}
.div3 {
    background-color: yellow;
}

Javascript

var container = document.getElementById("container");
setInterval(function() {
    container.scrollTop += 1;
}, 20);

【讨论】：

【解决方案2】：

您尝试过任何库吗？ http://iscrolljs.com/ 看起来很有希望，但我无法测试（没有 iOS 设备）。

即使在动量期间，也能精细控制滚动位置。您始终可以获取和设置滚动条的 x,y 坐标。
开箱即用的多平台支持。从较旧的 Android 设备到最新的 iPhone，从 Chrome 到 Internet Explorer。

【讨论】：

我只是在排队。也许是一个片段来说明 OP 如何使用库提供的功能来解决他们的问题？
是的，也许是这样。
当然，没有必要从库中包含 code。库的名称和链接就足够了。但是你确实需要准确地解释图书馆是如何解决这个人的问题的。这就是缺少这个答案的地方。有关如何改进它的一些指导，请参阅 this answer。
感谢您的指导。

【解决方案3】：

我在 Safari 和 iPad 上运行良好：

$('html, body').animate({
        scrollTop: 0
 }, 1000);

不确定，但您可以通过以毫秒为单位给出一些滚动动画时间来尝试。

【讨论】：

【解决方案4】：

我使用了 GreenSock ScrollTo 插件，效果非常好。你可以从their website获取它

优点是它有缓动选项并且适用于任何平台等

$("button").each(function(index, element){
  $(this).click(function(){
    TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1),   offsetY:70}});
  })
})

【讨论】：

【解决方案5】：

我正在使用以下 jquery 代码，它适用于每个浏览器（我不使用 IE :)）

  $("html,body").animate({
    scrollTop: 0
}, "slow");

跨浏览器滚动到顶部：

    if($('body').scrollTop()>0){
        $('body').scrollTop(0);         //Chrome,Safari
    }else{
        if($('html').scrollTop()>0){    //IE, FF
            $('html').scrollTop(0);
        }
    }

跨浏览器一个 id = test_id 的 div：

    if($('body').scrollTop()>$('#test_id').offset().top){
        $('body').scrollTop($('#test_id').offset().top);         //Chrome,Safari
    }else{
        if($('html').scrollTop()>$('#test_id').offset().top){    //IE, FF
            $('html').scrollTop($('#test_id').offset().top);
        }
    }

【讨论】：

【解决方案6】：

似乎 safari 根本不喜欢 'html'，而其他人不喜欢 'body'。而且 ('html, body') 也不会削减它。所以一个简单的解决方案可能是；

function example() {
if($.browser.safari) scrollentity = $("body"); 
else scrollentity = $("html");
scrollentity .animate({scrollTop: $("#target").offset().top}, 1500, 'swing')
}

【讨论】：