时间戳

首页 > 解决方案 > 滚动容器高度设置为小于窗口高度

javascript - 滚动容器高度设置为小于窗口高度

问题描述

我正在尝试使用 Dennis Gaebel 的这个精彩示例使用精灵和 ScrollMagic 制作动画。我的问题是如何制作一定高度而不是 100% 的屏幕的场景（动画在滚动时发生的地方）？如果我将场景设置为高度：50%；例如，我在场景下方得到了这个大的空白区域。任何帮助将非常感激。

// @explanation
// define the pin once in the target scene, but
// don't attach animation within same scene; instead
// create a scene for every class and toggle them on or off
// depending on the offset value of the scroll.

// @info
// To see this pen with indicators make sure to uncomment the 
// lines containing .addIndicators()
//
// While this is a scroll example I've also included a CSS only
// version to understand how steps can work in CSS animations.

// global vars
var viewer       = document.querySelector('.viewer'),
    frame_count  = 9,
    offset_value = 100;

// init controller
var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 0,
    reverse: true
  }
});

// build pinned scene
new ScrollMagic.Scene({
  triggerElement: '#sticky',
  duration: (frame_count * offset_value) + 'px',
  reverse: true
})
.setPin('#sticky')
//.addIndicators()
.addTo(controller);

// build step frame scene
for (var i = 1, l = frame_count; i <= l; i++) {
  new ScrollMagic.Scene({
      triggerElement: '#sticky',
      offset: i * offset_value
    })
    .setClassToggle(viewer, 'frame' + i)
    //.addIndicators()
    .addTo(controller);
}
html,
body {
  height: 100%;
}

body {
  width: 100%;
}

.header {
  color: white;
  font-size: 50px;
}

.section {
  height: 50%;
  background: #293744;
  color: #899eb5;
}

.scene {
  height: 50%;
  width: 100%;
  background: #EAEAEA;
}

.center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;
}

.viewer {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
  width: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/doodle-sprite.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
}

.viewer.frame1 {
  background-position: -200px 50%;
}

.viewer.frame2 {
  background-position: -400px 50%;
}

.viewer.frame3 {
  background-position: -600px 50%;
}

.viewer.frame4 {
  background-position: -800px 50%;
}

.viewer.frame5 {
  background-position: -1000px 50%;
}

.viewer.frame6 {
  background-position: -1200px 50%;
}

.viewer.frame7 {
  background-position: -1400px 50%;
}

.viewer.frame8 {
  background-position: -1600px 50%;
}

.viewer.frame9 {
  background-position: -1800px 50%;
}

@-webkit-keyframes drink-coffee {
  to {
    background-position: -1800px 50%;
  }
}

@keyframes drink-coffee {
  to {
    background-position: -1800px 50%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<header class="header section">
  <div class="center">&darr;</div>
</header>

<section class="scene section" id="sticky">
  <div class="viewer"></div>
</section>

<section class="section">
  <div class="center">End</div>
</section>

标签： javascriptjqueryhtmlcssuiscrollview

解决方案

创建一个元素作为你的包装器，给它 CSS：

.wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

然后把你的卷轴东西放在那里。

如果这不起作用，请告诉我。

推荐阅读