How to programmatically scroll window on iPad?

Question

My application includes several features that programmatically scroll to particular elements on a page. Unfortunately, it's not working on Safari/iPad. I have tried the following methods of scrolling:

window.scroll(0, y);

window.scrollTo(0, y);

$(window).scrollTop(y);

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

Is it simply not possible to programmatically scroll the window on Safari/iPad, or am I just doing it incorrectly? All of these methods worked for all browsers I tested on the PC.

Answer 1

I haven't found a way to scroll the window programmatically on iPad. One possible workaround is to wrap the page content in a fixed div container, and to scroll it by changing the div's scrollTop property. You can see that method in this codepen. I tested it successfully on iPad with Safari and Chrome, and on Windows with Firefox, Chrome and 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);