Как программно прокручивать окно на iPad?

Мое приложение включает в себя несколько функций, которые программно прокручиваются до определенных элементов на странице. К сожалению, он не работает на Safari/iPad. Я пробовал следующие методы прокрутки:

window.scroll(0, y);

window.scrollTo(0, y);

$(window).scrollTop(y);

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

Невозможно ли программно прокручивать окно на Safari/iPad, или я просто делаю это неправильно? Все эти методы работали для всех браузеров, которые я тестировал на ПК.

Ответы

Ответ 1

Я не нашел способ программно прокручивать окно на iPad. Один из возможных способов обхода - обернуть содержимое страницы в фиксированном контейнере div и прокрутить ее, изменив свойство div scrollTop. Вы можете увидеть этот метод в этот код. Я тестировал его на 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.

Ответ 3

Он работает отлично для меня на сафари и iPad:

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

Не уверен, но вы можете попробовать его, указав некоторые временные интервалы анимации прокрутки в миллисекундах.

Ответ 4

Я использую плагин GreenSock ScrollTo, который творит чудеса. Вы можете захватить его из их веб-сайт

Преимущество заключается в том, что он имеет варианты облегчения и работает на любой платформе и т.д.

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

Ответ 5

Я использую следующий код jquery, и он работает для каждого браузера (i dont user 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);
        }
    }

Кросс-браузер div с id = test_id:

    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

Кажется, сафари вообще не нравится "HTML", в то время как другим не нравится "тело". И ('html, body') тоже не будет сокращать это. Таким образом, простое решение может быть;

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