Question

我使用skrollr.js制作动画，出于某种原因滚动无法正常工作。桌面上的一切都运行良好。正如文档中所建议的那样，我将所有东西都包含在一个id为“skrollr-body”的div中，但当我在浏览器控制台中检查渲染的html时，我可以看到两个具有相同id的“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>

谢谢，查兰。

Answer 1

尝试当你“我把所有东西都包裹在一个带有id的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>

使用skrollr.js和id为“skrollr-body”的多个div在Android上使用Scroll不起作用

1 个答案: