0

我将 skrollr.js 用于动画，由于某种原因滚动不起作用。在桌面上一切正常。正如文档中所建议的那样，我将所有内容都包装在一个 ID 为“skrollr-body”的 div 中，但是当我在浏览器控制台中检查呈现的 html 时，我可以看到两个具有相同 ID“skrollr-body”的 div。第一个是空 div，另一个 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>

谢谢，查兰。

4

1 回答 1

0

当你是“我把所有东西都包装在一个 id 为“skrollr-body”的 div 中，但是”撤消那个..

现在在

$(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>
于 2014-03-11T13:38:23.617 回答