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％垂直滾動（幻燈片滾動）

回答

相關問題