Question

我正在尝试循环this fiddle，以便＃box2和#box在连续循环中显示自己（具有无限滚动？）。换句话说，每当一个框填满框架时，下一个框应该出现在距离...再次......再次......再次......等等

window.addEventListener( 'load', function() {
  var box = document.getElementById('box'),
      docHeight = document.documentElement.offsetHeight;

  window.addEventListener( 'scroll', function() {
        // normalize scroll position as percentage
    var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
        transformValue = 'scale('+(1-scrolled)+')';

    box.style.WebkitTransform = transformValue;
    box.style.MozTransform = transformValue;
    box.style.OTransform = transformValue;
    box.style.transform = transformValue;

  }, 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
    box.className = 'transitions-enabled';
    // change scroll position
    window.scrollTo( 0, scrollY );
  }, false);

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

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

}, false);

我不确定下一步采取什么步骤，以便在两个div之间创建一个无缝循环。

谢谢！

Answer 1

看看这个小提琴 - 它可以肯定地使用一些抛光，但只是为了你的工作

http://jsfiddle.net/daZmA/520/

＆＃13;

var currentlyActiveBox = 1;
var numBoxes = 2;
var prevScroll = 0;

window.addEventListener( 'load', function() {
  var box = document.getElementById('box' + currentlyActiveBox),
      docHeight = document.documentElement.offsetHeight;
  
  window.addEventListener( 'scroll', function() {
  
  	var box = document.getElementById('box' + currentlyActiveBox);
        // normalize scroll position as percentage
    var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
        transformValue = 'scale('+(1-scrolled)+')';
 
				/*Looks like we are turning the page - hide all boxes for now*/
				if(scrolled === 1 || scrolled === 0){
        	$(".box").hide();
        }

				/*Going to the next box*/
        /*prevScroll != 0 prevents jumping between the top and the bottom*/
        if(scrolled === 1 && prevScroll != 0){
        	  /*Make sure that we won't go beyond the number of boxes*/
        	if(currentlyActiveBox + 1 <= numBoxes){
          	  window.scrollTo(0, 0);
        			currentlyActiveBox++;
          }
        }
        
        /*Going to the previous box*/
        if(scrolled === 0 && prevScroll != 1){
          if(currentlyActiveBox - 1 >= 1){
            window.scrollTo(0, docHeight);
            currentlyActiveBox--;
          }
        }
        
        /*Now display the currently active box back*/
        $("#box" + currentlyActiveBox).show()
        
        prevScroll = scrolled;

    box.style.WebkitTransform = transformValue;
    box.style.MozTransform = transformValue;
    box.style.OTransform = transformValue;
    box.style.transform = transformValue;
    
  }, false);
  
  function transitionEnded(event) {
    // disable transition
    box.className = '';
  }
  
  box.addEventListener( 'webkitTransitionEnd', transitionEnded, false);
  box.addEventListener( 'transitionend', transitionEnded, false);
  box.addEventListener( 'oTransitionEnd', transitionEnded, false);
  
}, false);

＆＃13;

Answer 2

代码有点脏，对不起，但它确实有效。它实际上只能向下滚动，但您可以轻松编辑它来处理回滚。可能你必须将window.scrollY设置为中间窗口并从那里开始，检查滚动方向。当比例为0

时发生交换

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 = "";
    older_box.style.MozTransform = "";
    older_box.style.OTransform = "";
    older_box.style.transform = "";
}

内外容器之间

<div id="outer-container">
  <div id="container">
    <div id="box"></div>
  </div>
  <div id="box2"></div>
</div>

Check fiddle

通过滚动div来循环缩放/缩放

2 个答案: