Wednesday, August 9, 2017

How to programmatically scroll window on iPad?

By Hường Hana 6:30 AM , , , Leave a Comment

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.

4 Answers

Answers 1

Have you tried any libraries? http://iscrolljs.com/ looks promising, but I cannot test (no iOS device).

  • Granular control over the scroll position, even during momentum. You can always get and set the x,y coordinates of the scroller.
  • Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer.

Answers 2

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);

Answers 3

Its working fine for me on safari and iPad:

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

Not sure but you can try it by giving some scroll animation timings in milliseconds.

Answers 4

i am using following code of jquery and it work for every browser (i dont user IE :) )

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

Cross-browser scroll to top:

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

Cross-browser a div with 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);         }     }
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment