Прокрутка не работает в Android при использовании skrollr.js и нескольких div с идентификатором skrollr-body

Я использую skrollr.js для анимации, и по какой-то причине прокрутка не работает. На десктопе все работает нормально. Как указано в документации, я завернул все в div с идентификатором «skrollr-body», но когда я проверял отображаемый html в консоли браузера, я мог видеть два div с одним и тем же идентификатором «skrollr-body». Первый — пустой div, а второй — div-оболочка, которую я добавил. Пожалуйста помоги.

Это визуализированный 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>

Спасибо, Чаран.


javascript html jquery css skrollr
person charan    schedule 11.03.2014    source источник
comment
пожалуйста, вставьте отрендеренный html   -  person JF it    schedule 11.03.2014
comment
Так зачем добавлять обертку DIV, просто не добавляйте ее и смотрите   -  person A. Wolff    schedule 11.03.2014
comment
Удален div-оболочка, все еще не работает.   -  person charan    schedule 11.03.2014
comment
давая этому вопросу +1 голос, чтобы противостоять чьему-то необъяснимому отрицательному голосу.   -  person Warren Rumak    schedule 11.03.2014

Ответы (1)


arrow_upward
0
arrow_downward

попробуйте, когда вы: «Я завернул все в div с идентификатором «skrollr-body», но» отмените это ..

Сейчас в

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

Обновлено – $('#skrollr-body').remove(); удалит это <div id="skrollr-body"></div>

затем $('#content_div').wrap('<div id="skrollr-body">'); завернет <div class="container" id="content_div"> в нужный div с новым <div id="skrollr-body">

ваш новый HTML будет выглядеть так:

<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>
person JF it    schedule 11.03.2014
comment
может улучшиться, если вы предоставите визуализированный HTML. - person JF it; 11.03.2014
comment
Я добавляю skrollr-body, чтобы он работал в мобильном браузере. Это не работает, даже если я удалил идентификатор. - person charan; 11.03.2014
comment
да, он добавит оболочку после того, как удалит пустую, о которой вы говорили в вопросе .. @charan - person JF it; 11.03.2014
comment
<div id="skrollr-body"><div> Это добавлено из skrollr.js <div class="container">Some html</div> - person charan; 11.03.2014
comment
это просто становится все более запутанным charan ... можете ли вы добавить более подробную информацию к вопросу, немного html после загрузки страницы + код (если есть), который вы использовали для запуска плагина на элементе. - person JF it; 11.03.2014
comment
Я добавил визуализированный html. Пожалуйста, проверьте. Спасибо. - person charan; 11.03.2014
comment
Я уже проверил ваш ответ, но он все еще не работает в мобильном браузере. Есть идеи? - person charan; 11.03.2014
comment
нет, с этим плагином что-то не так.. он неправильно форматирует себя. простите. - person JF it; 11.03.2014
comment
Виноват. В самом html была ошибка, и я ее не заметил. Спасибо! - person charan; 14.03.2014
comment
@charan рад, что ты разобрался, приятель :) - person JF it; 14.03.2014