Skrollr not working on mobile devices

Asked 9/7, 2014 at 8:7 Answered 14/7, 2014 at 9:18

Solved javascript jquery html mobile skrollr

so this seems to be a common question, however none of the answers have provided me with any joy. I've fully read the Skrollr Documentation and can conclude I'm totally at a loss here.

My basic html markup:

<html>
  <head>
    <!-- Head Stuff -->
  </head>

  <body>
    <div id="navbar">
      <!-- This is a fixed position div -->
    </div>
    <div id="skrollr-body">
      <!-- Rest of my site -->
    </div>
    <script src="skrollr.min.js"></script>
    <script>
      skrollr.init({
        forceHeight: false
      });
    </script>
  </body>

</html>

So you can see as the documentation states my fixed element is outside my other content.

I'm using Version 0.6.26 (2014-06-08) - downloaded from the GitHub page.

Mobile testing on iPad 2, iOS7 and Google Nexus 4, Android 4.4.4

Thanks in advance for any suggestions/help

Impish answered 9/7, 2014 at 8:7 Comment(0)

I simply hadn't styled/set a height on the division skrollr-body. I fixed simply by adding:

#skrollr-body {
    float: left;
    width: 100%;
    height: 100%;
}

Impish answered 14/7, 2014 at 9:18 Comment(0)

According to this (about half way down under the section mobile support), to make it work on mobile devices you need a #skrollr-body on your page, which I did not see in your source.

Also, this github issue seems to address this problem.

Broadbill answered 13/7, 2014 at 21:22 Comment(1)

Line 44: <div id="skrollr-body"> – Impish 14/7, 2014 at 9:15

Recommended topics

Hot tags