jQuery 100％垂直滚动（幻灯片滚动）

我知道有很多伟大的插件用于此目的，但我觉得这是我想用很多东西，所以我想看看它是如何完成的！我知道你能做到这样：jQuery 100％垂直滚动（幻灯片滚动）

HTML：

<div id="section1"> 
<div id="section2">

CSS：

#section1{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#section2{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 100%; 
    left: 0; 
} 

#section1:active{ 
    position: fixed; 
} 

#section2:active{ 
    position: fixed; 
}

的jQuery：

$(".wrapper").on('mousewheel DOMMouseScroll', function (event) { 
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
    $('.slide-1').addClass('active'); 
} else { 
    $('.slide-2').addClass('active'); 
} 
});

我想学习如何做到这一点的最好办法。我很抱歉，代码只是我写的很快。

来源

2016-11-15 Magnus Ihle

[fullPage js]（http://www.alvarotrigo.com/fullPage/）值得一看 –

我不想使用库 –

这实际上最典型的是用delta计数器完成的。你将需要一个像jQuery mousewheel这样的库。然后你会有一个可以听的叫做“鼠标滚轮”的活动。一旦你的，基本的逻辑是这样的（红色窗口滚动下）：

var deltaCounter = 0, 
 
\t oldDelta = 0, 
 
\t scrollDirection = 0, 
 
\t threshold = 250; 
 
$("html").on('mousewheel', function(e) { 
 
\t e.preventDefault(); 
 
\t deltaCounter += e.deltaY; 
 
\t if (Math.abs(deltaCounter) >= threshold) { 
 
\t \t deltaCounter = 0; 
 
\t \t if (scrollDirection === 0) { 
 
\t \t \t next(); 
 
\t \t } else { 
 
\t \t \t prev(); 
 
\t \t } 
 
\t } 
 
\t if (oldDelta < deltaCounter) { 
 
\t \t scrollDirection = 1; 
 
\t } else { 
 
\t \t scrollDirection = 0; 
 
\t } 
 
\t oldDelta = deltaCounter; 
 
}); 
 

 
function next(){ 
 
\t console.log("NEXT PAGE"); 
 
} 
 

 
function prev(){ 
 
\t console.log("PREV PAGE"); 
 
}

body{ 
 
    background-color:rgba(255,200,200,0.3); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

一旦你有了这个，你可以申请任何你想要在发生了“下一页“和”上一页“的情况。调整threshold将确定“页面”之间需要多少滚动。

来源

2016-11-15 19:33:29

你可以只尝试像

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
});

凡＃键可以是任何事情。基本上点击＃按钮将带你到动画的#elementtoScrollToID的顶部。

来源

2016-11-15 19:19:33

jQuery 100％垂直滚动（幻灯片滚动）

回答

相关问题