Scroll doesn't work in android on using skrollr.js and multiple divs with id "skrollr-body"

StackOverflow https://stackoverflow.com/questions/22327231

Pergunta

I am using skrollr.js for animations and for some reason scroll is not working. Everything is working fine in desktop. As suggested in documentation, I wrapped everything in a div with id "skrollr-body" but when I check the rendered html in browser console, I could see two divs with the same id "skrollr-body". The first one is an empty div and the other div is the wrapper div I added. Please help.

This is the rendered HTML

<body>
    <div id="skrollr-body"></div>
    <div class="container" id="content_div">
        <div class="row feature-row">
        <div class="col-sm-6 col-md-6">
        <div id="screens_div">
            <img class="img-responsive skrollable skrollable-before" data-anchor-target="#screens_div" data-center-top="transform: rotate(0deg);" data-center-bottom="transform: rotate(90deg);" id="lumia" src="images/lumia.png" style="-webkit-transform: rotate(0deg);">
        </div>
        </div>
        <div class="col-sm-6 col-md-6" id="innovative">
        <h2 style="color:#FF4B25;">INNOVATIVE AD FORMATS</h2>
        <p class="description_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut justo tortor. Nulla faucibus aliquet nisi sit amet iaculis. Fusce libero mauris, mollis nec nulla eget, imperdiet blandit lacus. Ut posuere, dolor ac lobortis suscipit, tellus nulla cursus massa, a vulputate sem erat sit amet orci. Nam ut suscipit purus. Ut ut vehicula risus. Vestibulum ac quam sagittis, feugiat velit at, laoreet metus. Aliquam suscipit vulputate risus, eget commodo orci tempor ac. Suspendisse suscipit bibendum risus quis condimentum.</p>
        </div>
    </div>  
    </div>
    <script src="javascripts/skrollr.js" type="text/javascript"></script>
<script type="text/javascript">
    var s = skrollr.init({
        forceHeight : false
    });
</script>
</body>

Thanks, Charan.

Foi útil?

Solução

try when you are " I wrapped everything in a div with id "skrollr-body" but" undo that..

now in 

$(document).ready(function() {
    $('#skrollr-body').remove(); //removes the empty div..
    $('#content_div').wrap('<div id="skrollr-body">'); 
});

Updated - $('#skrollr-body').remove(); will remove this <div id="skrollr-body"></div>

then $('#content_div').wrap('<div id="skrollr-body">'); will wrap <div class="container" id="content_div"> in the required div with a new <div id="skrollr-body">

your new HTML will look like this: 

<body>
 <div id="skrollr-body">
  <div class="container" id="content_div">
    <div class="row feature-row">
    <div class="col-sm-6 col-md-6">
    <div id="screens_div">
        <img class="img-responsive skrollable skrollable-before" data-anchor-target="#screens_div" data-center-top="transform: rotate(0deg);" data-center-bottom="transform: rotate(90deg);" id="lumia" src="images/lumia.png" style="-webkit-transform: rotate(0deg);">
    </div>
    </div>
    <div class="col-sm-6 col-md-6" id="innovative">
    <h2 style="color:#FF4B25;">INNOVATIVE AD FORMATS</h2>
    <p class="description_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut justo tortor. Nulla faucibus aliquet nisi sit amet iaculis. Fusce libero mauris, mollis nec nulla eget, imperdiet blandit lacus. Ut posuere, dolor ac lobortis suscipit, tellus nulla cursus massa, a vulputate sem erat sit amet orci. Nam ut suscipit purus. Ut ut vehicula risus. Vestibulum ac quam sagittis, feugiat velit at, laoreet metus. Aliquam suscipit vulputate risus, eget commodo orci tempor ac. Suspendisse suscipit bibendum risus quis condimentum.</p>
    </div>
  </div>  
 </div>
</div>
</body>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top