如何去除 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

"overflow: scroll;" 导致白色 space 您可以尝试 "overflow: auto;"，但我建议使用不同的方法创建视差效果，而不是使用 Skrollr。

如何去除 skrollr 视差效果中的空白

How to remove whitespace in parallax effect on skrollr

html

css

parallax

skrollr