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

Question

使用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创建视差效果。