Skrollr iPad & skrollr-body

Question

I've followed the instructions on the Skrollr website as well as in this question (How to fix Skrollr on Mobile?). My issue is that when I add id="scrollr-body" to my body tag, the scrolling stops working everywhere.

This is the code I'm using in the footer:

<script type="text/javascript">

skrollrCheck = function() {
var winWidth        = window.innerWidth;
var winHeight       = window.innerHeight;

if(winWidth >= 768) {
if(document.body.id !== 'skrollr-body') {
  document.body.id = 'skrollr-body';
  // Init Skrollr
  skrollr.init({
      forceHeight: false,//disable setting height on body
      mobileDeceleration:0.04,
      smoothScrolling:true,
      render: function(data) {
          //Debugging - Log the current scroll position.
          //console.log('data.curTop: ' + data.curTop);
      }
  });
}


if(winWidth > winHeight) {
  console.log('orientation is landscape');
  skrollr.get().refresh();
} else if (winWidth < winHeight) {
  console.log('orientation is portrait');
  skrollr.get().refresh();
}
} else if (winWidth < 768){
// Destroy skrollr for screens less than 600px
if(document.body.id === 'skrollr-body') {
  skrollr.init().destroy();
  document.body.id = '';
}
}
};

//Initialize skrollr, but only if it exists.
if(typeof skrollr !== typeof undefined){
// INITIALIZE
window.onload = skrollrCheck();
window.addEventListener('resize', skrollrCheck);//listens for resize,     
and refreshes skrollr
window.addEventListener('orientationchange', skrollrCheck);//listens  
for     
orientation change, and refreshes skrollr
console.log('skrollr active!');
} else {
console.log('skrollr is did not load.');
}

</script>

If I remove the scrollr-body id from the body tag, parallax scrolling works great on desktop, but scrolling doesn't work at all on iPad. If I add it in, parallax disappears from everywhere, but iPad works fine. Any ideas? Thanks!

If it helps at all, here's the site that I'm having the issue with: http://www.jmakhotels.com. — hudsonian, Jan 25 '15 at 21:43
Anyone have any ideas here--or at the very least how I can use js to ensure this only every appears on non-iOS/non-Android? Thanks! — hudsonian, Jan 26 '15 at 15:06
Read that sentence out loud (from the post you've linked) "You need to wrap all your content in a element with the ID of skrollr-body". You need a wrapping element like a div. — Prinzhorn, Jan 27 '15 at 10:03
Yep, should've made clear--I tried that. So currently, just to show you, there's a div wrapping all content with the id of skrollr-body. The parallax works great on desktop, but pages don't scroll at all on iPad: http://www.jmakhotels.com/kenwood-inn-and-spa/ Any ideas? I love the parallax, but I have to find some workaround for iPad, and none of the documentation I've tried has done the trick. Thanks! — hudsonian, Jan 27 '15 at 14:41
Come on ... `if(document.body.id !== 'skrollr-body') {document.body.id = 'skrollr-body';` When skrollr searched for the element it will always use `body` as only one ID is allowed and body comes first. — Prinzhorn, Jan 27 '15 at 17:19
I just took that if(document)... code out so that the wrapping div is the only thing with id="skrollr-body", and now it's not working anywhere. — hudsonian, Jan 27 '15 at 17:27
Wrapping everything with skroller-body certainly doesn't fix anything on devices. — Ben Racicot, Nov 10 '15 at 19:30

hudsonian · Accepted Answer · 2015-02-20T14:16:32.377

Well, I went with a simpler version of the code in the footer:

<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
smoothScrolling: false
});

And instead of dynamically inserting the skrollr-body into the tag, I simply wrapped all of the page content in:

<div id="skrollr-body">

UPDATE

This was still not scrolling with the latest iPad3, so I am now using the following:

<script type="text/javascript">

if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
}

</script>

Wrapping the page content in `
` fixed iOS devices for me. That and removing an extra `
` tag... — myol, Feb 19 '15 at 13:12

Skrollr iPad & skrollr-body

1 Answers1