Question

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

window.scroll(0, y);

window.scrollTo(0, y);

$(window).scrollTop(y);

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

根本无法以编程方式在Safari / iPad上滚动窗口，或者我只是错误地进行了操作？所有这些方法都适用于我在PC上测试的所有浏览器。

Answer 1

我还没有找到一种在iPad上以编程方式滚动窗口的方法。一种可能的解决方法是将页面内容包装在固定的div容器中，并通过更改div的scrollTop属性来滚动它。您可以在this codepen中看到该方法。我在Safari上使用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);

Answer 2

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

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

Answer 3

在safari和iPad上我的工作正常：

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

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

Answer 4

我使用GreenSock ScrollTo插件，可以创造奇迹。您可以从their website

抓取它

优点是它具有宽松的选项，适用于任何平台等

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

Answer 5

野生动物园似乎根本不喜欢“ html”，而其他人则不喜欢“ body”。并且（'html，body'）也不会削减它。因此，一个简单的解决方案可能是；

void foo (double const *vec) {
    // Want the size of vec here in foo
}

int main () {
    std::vector<double> vec {1., 2., 3.};
    foo( &(vec[0]) );
}

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

5 个答案: