JavaScript的滚动检测和滚动速度

我工作的一些JS项目，我试图改变滚动速度和滚动到100％，明年分工高度...JavaScript的滚动检测和滚动速度

我对向下滚动理念> 检测InnerHTML高度+从顶部检测滚动空间，使用innerHTML高度和计数器检测位置...

当用户向下滚动滚动时间，位置为0并且scrollTop更多时，所以函数被调用并将用户带到下一个div。（其行）

但是，然后，当用户向上滚动时，我能做些什么来使用户回到以前的div？这里是我的代码：

<html> 
<head> 
<style> 
body,html { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
} 
.scrollers { 
    height: 100%; 
    width: 100%; 
    transition: all 1s; 
    -webkit-transition: all 1s; 
} 
#N1 { 
    background-color: #725a5a; 
} 
#N2 { 
    background-color: #4a478d; 
} 
#N3 { 
    background-color: #478d6f; 
} 
#N4 { 
    background-color: #8d8a47; 
} 
#status { 
    text-align: center; 
    width: 100%; 
    color: #000; 
    font-size: 20px; 
    position: fixed; 
    z-index: 10; 
    top: 5px; 
} 
</style>  
<script> 
var $firstPosition = 1; 
window.onscroll = scroll; 
var $counter = 0; 
var $status = "play"; 
function scroll() { 
var $sctop = document.body.scrollTop; 
var $inrH = window.innerHeight; 
var $secst; 
if (($status=="pause") || ($secst=="pause")){ 

} else if ($status=="play"){ 
    var $position = $counter * $inrH; 
    if ($sctop>$position) { 
     $counter++; 
     $position = $counter * $inrH; 
     $status = "pause"; 
     $secst = "pause"; 
     callMeInterval = setInterval(function() { if(!($sctop==$position)){window.scrollTo(0,$firstPosition);$firstPosition++;$sctop = document.body.scrollTop;document.getElementById("status").innerHTML = "sctop = " + $sctop + " $position = " + $position + "$counter = " + $counter; } else if($sctop==$position) {$status = "play";secst==""} }, 1); 
    } 
// Problem Starts Here 
    else { 
     $counter--; 
     $position = $counter * $inrH; 
     $status = "pause"; 
     $secst = "pause"; 
     callMeInterval = setInterval(function() { if(!($sctop==$position)) {$firstPosition--;window.scrollTo(0,$firstPosition);$sctop = document.body.scrollTop;document.getElementById("status").innerHTML = "sctop = " + $sctop + " $position = " + $position + "$counter = " + $counter; } else if($sctop==$position) {secst=="";$status = "play"} }, 1); 
    } 
} 
} 

</script>  
</head> 
<body> 
<div id="status"> 

</div> 
<div id="N1" class="scrollers"> 

</div> 
<div id="N2" class="scrollers"> 

</div> 
<div id="N3" class="scrollers"> 

</div> 
<div id="N4" class="scrollers"> 

</div> 
</body> 
</html>

我敢肯定，整个事情就是与jQuery更容易，但是这是我的JavaScript类项目。谢谢

来源

2015-01-08 tsepehr

你不清除你的间隔，所以这是闪烁的原因。

clearInterval(callMeInterval);

我建议你使用requestAnimationFrame而不是使用window.setInterval

在这里，你有工作sample使用requestAnimationFrame重建

var lastScrollPosition = document.body.scrollTop, 
    sectionNo = 0; 

function doScroll(scrollPosition, step, first) { 
    var height = window.innerHeight, 
     min = height * sectionNo, 
     max = height * (sectionNo + 1); 

    scrollPosition += step; 

    if (min < scrollPosition && scrollPosition < max) { 
     // here should be some animation control 
     document.body.scrollTop = scrollPosition; 
     // Call next animation frame 
     window.requestAnimationFrame(doScroll.bind(null, scrollPosition, step)); 
    } else { 
     // It fires, when scroll is done 
     lastScrollPosition = scrollPosition; 
     document.addEventListener("scroll", scrollListener); 
    } 
} 
function scrollListener(e) { 
    var scrollPosition = document.body.scrollTop, 
     step; 

    // Stop scroll listening 
    document.removeEventListener("scroll", scrollListener); 

    // Get direction 
    step = scrollPosition >= lastScrollPosition ? 5 : -5; 

    // Go back to initial position 
    document.body.scrollTop = lastScrollPosition; 

    // Animate 
    window.requestAnimationFrame(doScroll.bind(null, lastScrollPosition, step, true)); 
} 
document.addEventListener("scroll", scrollListener);

来源

2015-01-08 14:12:40

很好的建议，但我应该用明确的时间间隔？ – tsepehr

总是当你的滚动动画完成后，你应该清除它。检查这[jsfiddle]（http://jsfiddle.net/vdasy7eh/） –

哇！完美。谢谢:) – tsepehr

JavaScript的滚动检测和滚动速度

回答

相关问题