1
我目前正在開發一個項目，其中所需的用戶體驗涉及與滾動事件的非常自定義的交互。自定義滾動UX
問題解決： 該頁面具有X部分，每個區域具有等於視口HIGHT height: 100vh;的高度。當用戶在視口上向下滾動時，當前可見部分停留在原來的位置，並且基於滾動距離的閾值（例如30px）進行滾動指示器動畫。一旦用戶滾動了閾值，下一部分從屏幕底部出現並覆蓋當前部分（仍然不動）。
初步探討： 設置各部分的絕對位置，並通過基於scrollwheel事件更改樣式進行調整。正文overflow:hidden和transform屬性來操縱節。不過，我遇到了問題。
- 的滾輪事件似乎記錄爲非常不穩定的解決方案來實現。
- 事件的.wheelDelta方面異步觸發，很難捕捉到手勢。 （在鉻上，它只是吐出3次的倍數，而不是px中手勢的距離）。這使得難以設置閾值併爲響應該閾值的元素設置動畫。
我基本上要能夠跟蹤像素的滾輪般的事件被覆蓋的數量，直到滾動閾值時適用這一數字在一定滾動提示元素的位置。一旦滿足，就會觸發一個函數來更改類並更新頁面上的一些信息。如果閾值未滿足，滾動提示元素將返回到默認位置。
我附加的方法並不覺得很有助於完成這一點，所以我正在尋找1）一種不同的和更穩定的方法，或2）修改/批評我做錯了這種方法的做法它穩定。
(function scrollerTest($){
\t $('body').on ('mousewheel', function (e) {
\t var delta = e.originalEvent.wheelDelta,
currentScreenID = $('section.active').data('self').section_id,
currentScreen = $('section.part-' + currentScreenID),
nextScreenID = currentScreenID + 1,
nextScreen = $('section.part-' + nextScreenID);;
\t
\t if (delta < 0) { // User is Scrolling Down
currentScreen.removeClass('active').addClass('top');
nextScreen.removeClass('bottom').addClass('active')
\t } else if (delta > 0) { // User is Scrolling Up
\t
\t }
\t });
}(jQuery));body {
overflow: hidden;
padding: 0;
margin: 0;
}
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999;
background-color: #CA5D44;
transition: 0.8s all ease-in-out;
}
section.part-1 {
position: relative;
z-index: 9;
}
section.part-2 {
background-color: #222629;
}
section.active {
transform: translateY(0);
}
section.top {
transform: translateY(-10%);
}
section.bottom {
transform: translateY(100%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<section class="part-1 home active" data-self='{ "section_id" : 1, "section_title" : "Home", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
<section class="part-2 about bottom" data-self='{ "section_id" : 1, "section_title" : "About", "menu_main_clr" : "#CA5D44" , "menu_second_clr" : "#fff", "logo_clr" : "white" }'>
</section>
<section class="part-3 contact bottom" data-self='{ "section_id" : 1, "section_title" : "Contact", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
</body>編輯注： 的片段似乎有一些問題與觸發事件和初審後更改類 - 不知道爲什麼。在我的本地示例中，它會一次全部觸發它們。
** Edite Note 2：** 列出的代碼只是我可以實現的最接近行爲的副本。不幸的是，整個閾值功能似乎很難達到，因爲wheel事件不像滾動事件那樣行爲。
你有沒有考慮檢查[fullPage.js（http://alvarotrigo.com/fullPage/）？這種事情最受歡迎的圖書館。 – Alvaro