javascript - Skrollr not working on mobile devices

so this seems to be a mon 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

so this seems to be a mon 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

Share Improve this question edited May 23, 2017 at 12:24 CommunityBot 11 silver badge asked Jul 9, 2014 at 8:07 Matt 2,6116 gold badges31 silver badges36 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

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%;
}

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Skrollr not working on mobile devices - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)