Question

我正在研究一些JS项目而且我正在尝试更改滚动速度并滚动到下一个100％的分区高度......

我向下滚动的想法＆gt; 检测InnerHTML高度+从顶部检测滚动空间，使用innerHTML高度和计数器检测位置....

当用户向下滚动fisrt时间时，position为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项目。感谢

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

JavaScript滚动检测和滚动速度

1 个答案: