JavaScript 滚动检测和滚动速度答案

【问题标题】：JavaScript Scroll Detection and scroll speedJavaScript 滚动检测和滚动速度
【发布时间】：2015-01-08 13:37:02
【问题描述】：

我正在做一些 JS 项目并且我正在尝试改变滚动速度并滚动到 100% 的下一个分割高度...

我的向下滚动的想法> 检测 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 Class 项目。谢谢

【问题讨论】：

标签： javascript html

【解决方案1】：

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

clearInterval(callMeInterval);

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

在这里，您可以使用 requestAnimationFrame 重建 sample

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);

【讨论】：

很好的建议，但我应该在哪里使用明确的间隔？
当你的滚动动画完成时你应该清除它。检查这个jsfiddle