我正在尝试更改此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);