到达溢出的边缘：在TweenMax中隐藏'curtain'

Question

我有一个 div 和 overflow: hidden;

在这个div下面，还有一个div需要scrollable。

滚动位在 TweenMax 上工作正常，但我需要在每个 scroll 之后确定我是否已到达父 div 的边缘，以更改 [= scroll 的 18=]。我不知道该怎么做。

这是一个快速的笔： http://codepen.io/anon/pen/wGJVOm

Answer 1

如果我理解正确的话，我想你可以做如下的事情：

片段：

var scrollButton = document.getElementById('scroll');
var container = document.getElementsByClassName('container')[0];
var inner = document.getElementsByClassName('inner')[0];
var containerWidth = 0;
var containerMaxWidth = 0;
var totalDuration = 1;
var duration = 0.8;
var ease = Power2.easeInOut;
var direction = '';
var DIRECTION_LEFT = 'DIRECTION_LEFT';
var DIRECTION_RIGHT = 'DIRECTION_RIGHT';
var currProgress = 0;
var progressFactor = 0.2;
var tl = new TimelineMax({
  paused: true
});

function initVariables() {
  containerWidth = container.offsetWidth;
  TweenMax.set(container, {
    position: 'absolute',
    width: 'auto'
  });
  containerMaxWidth = container.offsetWidth;
  TweenMax.set(container, {
    clearProps: 'all'
  });
}

function initTimeline() {
  tl.to(inner, totalDuration, {
    x: -containerMaxWidth + containerWidth,
    ease: Power0.easeNone
  });
}

function initListeners() {
  scrollButton.addEventListener('click', doScroll, false);
}

function doScroll() {
  if (direction === DIRECTION_RIGHT) {
    currProgress = currProgress - progressFactor;
  } else {
    currProgress = currProgress + progressFactor;
  }

  if (currProgress >= 1) {
    currProgress = 1;
    direction = DIRECTION_RIGHT;
  } else if (currProgress <= 0) {
    currProgress = 0;
    direction = DIRECTION_LEFT;
  }

  TweenMax.to(tl, duration, {
    progress: currProgress,
    ease: ease
  });
}

//
initVariables();
initTimeline();
initListeners();

.container {
  width: 400px;
  border: 1px solid green;
  overflow: hidden;
}
.inner {
  white-space: nowrap;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, magnam. Ut sunt nihil quo reprehenderit in voluptas voluptatum at tempore accusamus suscipit ipsam ea atque, unde, itaque quas pariatur architecto.
  </div>
</div>
<p>
  <span id="scroll">Scroll</span>
</p>

基本上，这是这里发生的事情：

您的 container 元素的 width 存储在名为 containerWidth 的变量中。
然后临时设置为 position: absolute 及其 width: auto。
此 container 元素的新宽度存储为 containerMaxWidth。
使用 TweenMax 的 clearProps: 'all' 设置后立即删除临时样式。
创建了一个名为 tl 的 TimelineMax，它具有从 x: 0 到它可以滚动到的 maximum 位置的定义运动，在这种情况下是 -containerMaxWidth + containerWidth 并且此时间线最初设置为 paused.
一个 direction 变量间接用于更新 TimelineMax 实例的 progress。
currProgress直接用于更新我们TimelineMax实例的progress。
这个currProgress是根据上面确定的direction计算出来的。
最后，补间更新我们的 tl 实例的 progress 属性。

让我知道这是否是您要找的东西。 Here 是上面的代码笔结果。

希望这对您有所帮助。

到达溢出的边缘：在TweenMax中隐藏'curtain'

Reaching the edge of overflow: hidden 'curtain' in TweenMax

javascript

scroll

overflow

gsap