1
我想創建一個無縫滾動頁面我正在建設有一個內部滾動div。以下是我希望它工作的方式：頁面滾動+內部滾動Div與JS和CSS
- 用戶向下滾動頁面，直到scrollTop達到div的頂部。
- div從overflow：hidden變爲overflow：scroll。
- 用戶然後滾動div，直到它們結束。
- 頁面開始再次滾動，div從溢出返回：滾動到溢出：再次隱藏。 （這是如此，如果他們反向滾動備份頁面，當他們擊中div時，它不會開始滾動過早。）
該過程應該以相反的方式工作。我認爲使用狀態可能會有幫助。我的三個狀態是前,在和後。如果你通過門檻，你的狀態是前，它更改爲在和股利「解鎖」滾動。然後，當你完成滾動的div，它自然推動整個頁面。狀態從轉換爲到後。
我的問題是，如果你滾動速度太快，瀏覽器不會註冊這些變化，直到爲時已晚，div已經過去了。我寫了這個代碼來管理過渡：
function onScroll() {
if (cur_coord > cap_y &&
cap_state == 'pre') { // Pre -> On
container.css({ 'overflow-y':'scroll'});
$(window).scrollTop(cap_y);
cap_state = 'on';
} else if (cur_coord > cap_y &&
cap_state == 'on') { // On -> Post
container.css({ 'overflow-y':'hidden'});
cap_state = 'post';
} else if (cur_coord < cap_y &&
cap_state == 'post') { // Post -> On
container.css({ 'overflow-y':'scroll'});
$(window).scrollTop(cap_y);
cap_state = 'on';
} else if (cur_coord < cap_y &&
cap_state == 'on') { // On -> Pre
container.css({ 'overflow-y': 'hidden'});
cap_state = 'pre';
}
}
和我創建了一個以小提琴演奏：
任何思考一個我怎麼可能做出這種無縫滾動體驗？
謝謝！