如何在Skrollr上消除视差效果中的空格

Question

我在删除使用skrollr制作视差效果时得到的空格时skrollr 。 我已经搜索并尝试了从很多相关主题中获得的解决方案，但是仍然找不到任何解决方法，我已经尝试使用forceheight但是仍然无法正常工作

这是我的HTML：

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

 * { margin: 0px; padding: 0px; } html { overflow: scroll; } body { overflow: hidden; } ::-webkit-scrollbar { width: 0px; background: transparent; /* make scrollbar transparent */ } body h1, body h2 { font-family: 'Niconne', cursive; } .overlay { background: rgba(0, 0, 0, 0.5); } .bg-conf { background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100vw; height: 100vh; max-height: 100vh; min-height: 100vh; } .main-container { display: table; table-layout: fixed; width: 100vw; height: 100vh; overflow: hidden; position: relative; /* opacity: 0; */ } .content-container { max-width: 450px; margin: -150px auto 0 auto; display: table-cell; vertical-align: middle; color: black; padding: 0 8%; text-align: center; } img .img-round { /* object-fit: cover; */ border-radius: 50%; } /* Slide 1 */ #slide-1 .bg-conf { background-image: url('../img/Slide-1.jpg'); } 

 <section id="slide-1" style="min-height: 100vh;"> <div class="overlay"> <div class="bg-conf" data-center="background-position: 50% 0px" data-top-bottom="50% -100px" data-anchor-target="#slide-1"> <div class="main-container"> <div class="content-container" data-center="opacity: 1" data-110-top="opacity: 0" data-anchor-target="#slide-1 h1"> <img class="img-rounded" src="img/profile.jpg" alt="profile" style="border-radius: 50%; width: 150px; height: 150px; object-fit: cover;"> <h1>If you don't believe in yourself</h1> <h1>then just believe in me who believe in you</h1> <h2>&minus; Rakish F</h2> </div> </div> </div> </div> </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\\/script>') </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script> 

有人能帮我吗？ 我已经阅读了有关skrollr中空格的几乎所有线程，但仍然没有人可以帮助我解决这个问题

这是我得到的空白

Answer 1

“溢出：滚动；” 导致空白，您可以尝试“溢出：自动；”，但是我建议您使用其他方法而不使用Skrollr创建视差效果。