两个div之间的连续滚动循环

时间:2016-03-24 20:37:47

标签: javascript html css

我正在尝试更改此JSFiddle,以便容器可以向上和向下无限滚动(在循环中)。如何设置window.scrollY来处理Y轴上的向上和向下滚动?

这是我正在使用的javascript:

window.addEventListener('load', function() {
  var box = document.getElementById('box'),
    box2 = document.getElementById('box2'),
    container = document.getElementById('container'),
    outer_container = document.getElementById('outer-container'),
    current_box = box,
    docHeight = document.documentElement.offsetHeight;
  window.addEventListener('scroll', function() {
    // normalize scroll position as percentage
    var scrolled = window.scrollY / (docHeight - window.innerHeight),
      scale = 1 - scrolled
    transformValue = 'scale(' + (scale) + ')';

    current_box.style.WebkitTransform = transformValue;
    current_box.style.MozTransform = transformValue;
    current_box.style.OTransform = transformValue;
    current_box.style.transform = transformValue;
    if (scale == 0) {
      outer_container.appendChild(current_box);
      var older_box = current_box;
      current_box = current_box == box ? box2 : box;
      container.appendChild(current_box);
      window.scrollTo(0, 0);
      older_box.style.WebkitTransform = "0";
      older_box.style.MozTransform = "0";
      older_box.style.OTransform = "0";
      older_box.style.transform = "0";
    }
  }, false);

  document.getElementById('nav').addEventListener('click', function(event) {
    var level = parseInt(event.target.getAttribute('href').slice(1), 10),
      // normalize scroll position
      scrollY = (level / 4) * (docHeight - window.innerHeight);
    // enable transitions
    current_box.className = 'transitions-enabled';
    // change scroll position
    window.scrollTo(0, scrollY);
  }, false);

  function transitionEnded(event) {
    // disable transition
    current_box.className = '';

  }

  current_box.addEventListener('webkitTransitionEnd', transitionEnded, false);
  current_box.addEventListener('transitionend', transitionEnded, false);
  current_box.addEventListener('oTransitionEnd', transitionEnded, false);

}, false);

0 个答案:

没有答案