11

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

window.scroll(0, y);

window.scrollTo(0, y);

$(window).scrollTop(y);

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

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

4

6 回答 6

3

我还没有找到在 iPad 上以编程方式滚动窗口的方法。一种可能的解决方法是将页面内容包装在一个固定的 div 容器中，并通过更改 div 的scrollTop属性来滚动它。您可以在此 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);
于 2017-08-03T15:04:24.907 回答
2

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

  • 对滚动位置的精细控制，即使在动量期间也是如此。您始终可以获取和设置滚动条的 x,y 坐标。
  • 开箱即用的多平台支持。从旧的 Android 设备到最新的 iPhone，从 Chrome 到 Internet Explorer。
于 2017-08-02T15:24:27.913 回答
1

它在 Safari 和 iPad 上对我来说工作正常：

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

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

于 2017-08-08T07:17:42.293 回答
1

我使用 GreenSock ScrollTo 插件，它可以创造奇迹。你可以从他们的网站上获取

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

$("button").each(function(index, element){
  $(this).click(function(){
    TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1),   offsetY:70}});
  })
})
于 2017-08-09T13:33:36.683 回答
0

我正在使用以下 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);
        }
    }
于 2017-08-09T07:35:45.017 回答
0

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

function example() {
if($.browser.safari) scrollentity = $("body"); 
else scrollentity = $("html");
scrollentity .animate({scrollTop: $("#target").offset().top}, 1500, 'swing')
}
于 2019-01-14T04:01:05.693 回答