Skrollr初期設定<body>高さが高すぎる

Skrollrライブラリを使用して、背景の視差効果を作成しました。しかし、skillor.init（）を呼び出すと、ボディの高さが高すぎるため、ページの下に余分なスペースができます。Skrollr初期設定<body>高さが高すぎる

問題はここで見ることができます： http://codepen.io/designil/pen/Ggxde

HTML：

<div class="headrow"> 
<div class="container"> 
    <div class="row"> 

    <div class="col-md-3"> 
     <h1 class="logo"><a href="#">21GUNS</a></h1> 
    </div> 

    <div class="col-md-9"> 
     <div class="topmenu"> 
     <p> 
      <a href="#"><i class="fa fa-twitter"></i></a> 
      <a href="#"><i class="fa fa-facebook"></i></a> 
      <a href="#"><i class="fa fa-linkedin"></i></a> 
      <a href="#"><i class="fa fa-pinterest"></i></a> 
     </p> 
     <ul class="list-unstyled"> 
      <li> 
      <div class="dropdown"> 
    <a data-toggle="dropdown" href="#">MENU 1</a> 
    <ul class="dropdown-menu" role="menu"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 
      </li> 
      <li> 
      <a href="#">MENU 2</a> 
      </li> 
      <li> 
      <a href="#">MENU 3</a> 
      </li> 
      <li> 
      <a href="#">MENU 4</a> 
      </li> 
      <li> 
      <a href="#">MENU 5</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 
</div><!-- headrow --> 

<div class="bannerrow"> 
    <img src="http://placehold.it/1800x600" alt="" /> 
</div> 

<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3 text-center"> 
     <header> 
      <h2>21SERVICES</h2> 
      <p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p> 
     </header> 
     </div> 
    </div><!-- row --> 

    <div class="row"> 
     <div class="col-md-5"> 
     <div class="column2-box"> 
      <i class="fa fa-gift fa-fw"></i> 
      <h3>FLAT DESIGN</h3> 
      <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> 
     </div> 
     </div> 
     <div class="col-md-5 col-md-offset-2"> 
     <div class="column2-box"> 
      <i class="fa fa-gift fa-fw"></i> 
      <h3>FLAT DESIGN</h3> 
      <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> 
     </div> 
     </div> 
    </div><!-- row --> 

    <div class="row"> 
     <div class="col-md-5"> 
     <div class="column2-box"> 
      <i class="fa fa-gift fa-fw"></i> 
      <h3>FLAT DESIGN</h3> 
      <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> 
     </div> 
     </div> 
     <div class="col-md-5 col-md-offset-2"> 
     <div class="column2-box"> 
      <i class="fa fa-gift fa-fw"></i> 
      <h3>FLAT DESIGN</h3> 
      <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> 
     </div> 
     </div> 
    </div><!-- row --> 


    </div> 
</div> 

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" /> 
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>

CSS：

@blue: #293448; 
@red: #C1392B; 

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 

body { 
    font-family: 'Open Sans', sans-serif; 
} 

.headrow { 
    background: @blue; 
} 

.logo a { 
    color: #fff; 
    transition: 0.3s; 

    &:hover { 
    text-decoration: none; 
    color: #eee; 
    } 
} 

.topmenu { 
    text-align: right; 

    p { 
    margin-top: 10px; 

    a { 
     display: inline-block; 
     margin: 0 5px; 
     text-align: right; 
    } 
    } 

    ul { 
    margin-bottom: 0; 
    } 

    li { 
    display: inline-block; 
    margin-left: 30px; 

    a { 
     color: #eee; 
     display: block; 
     padding-bottom: 10px; 
     border-bottom: 3px solid transparent; 
     transition: 0.3s; 
    } 

    a:hover { 
     text-decoration: none; 
     border-bottom: 3px solid @red; 
    } 

    .dropdown-menu { 
     text-align: left; 

     li { 
     margin: 0; 
     display: block; 
     } 

     a:hover { 
     background: #ccc; 
     } 

     a { 
     color: @blue; 
     border: 0; 
     transition: 0; 
     } 
    } 
    } 
} 

.bannerrow { 
    img { width: 100%; height: auto;} 
} 

.servicerow { 
    color: #fff; 
    padding-bottom: 100px; 
    background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat; 
    background-size: cover; 

    header { 
    margin-top: 60px; 
    margin-bottom: 20px; 

    h2 { margin-bottom: 10px; } 

    p { font-size: 13pt; } 
    } 
} 
    .column2-box { 
    border: 1px solid #ddd; 
    padding: 10px; 
    margin: 15px 0; 

    i { font-size: 110px; float: left; } 

    h3 { margin-top: 0; } 

    }

JS：私は

$(function() { 
    $('.dropdown-toggle').dropdown(); 

    $('.dropdown').hover(function() { 
     $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200); 
    }, function() { 
     $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200); 
    }); 

    var s = skrollr.init({forceHeight: false}); 
});

をどちらの要素がページを高すぎるか分からない。

出典

2013-11-04 designil

skrollr.init({forceHeight: false});

https://github.com/Prinzhorn/skrollr#forceheighttrue

Skrollrは、あなたが実際にdata-bottom-topに到達できることを確認します。ご覧のように、この隙間は、要素の下端をビューポートの上端と完全に揃えることを可能にします。

出典

2013-11-04 12:50:14 Prinzhorn

もう一度私の人生を保存するためのプリンツホルンありがとう！私は{forceHeight：true}を追加しようとしましたが、これを決して修正しません：/（明らかに） – designil

skrollrの「一時停止」機能を使用するには、forceHeightをtrueに設定する必要があります。そのための回避策はありますか？ 'forceHeight：false'を使って作業を一時停止するか、余分なスペースをページの下部に固定するための別の方法ですか？ – zok

skrollrに一時停止機能はありません – Prinzhorn

Skrollr初期設定<body>高さが高すぎる

答えて

関連する問題