防止自動滾動並滾動到div

我知道有很多類似的帖子，但我還沒有得到我需要的代碼。防止自動滾動並滾動到div

基本上，我想在第一次用戶滾動時進行演示。爲此，我想防止滾動的默認動作和（如果它向下滾動）製作一個動畫到下一個div。

window.scrolledToRed = false 
window.scrolledToGreen = false 

window.scrollTo = (to, guard) => 
    $('html, body').animate({ 
    scrollTop: $(to).offset().top 
    }, 1000, => 
    window[guard] = true 
) 

window.addEventListener 'wheel', (e) -> 
    if (e.wheelDelta < 0) 
    if (!window.scrolledToRed) 
     scrollTo('.red', 'scrolledToRed') 
    else if (!window.scrolledToYellow) 
     scrollTo('.green', 'scrolledToGreen')

我已經創建了代表該問題的小提琴： https://jsfiddle.net/pn6zqgwu/2/

當用戶向下滾動我第一次想帶他到紅格，下一次綠色之一。我嘗試過的所有解決方案都沒有成功，因爲它既「跳躍」又滾動到我想要的地方。

有關如何解決問題的任何想法？

在先進的感謝

來源

2016-03-09 hcarreras

也許你需要調用e.preventDefault（），以防止瀏覽器的默認滾動行爲

來源

2016-03-10 07:34:58

的問題則是，它不與scrollTop的滾動：$（至）.offset（）頂部 – hcarreras

我加如preventDefault（），它似乎工作。這裏是鏈接：https://jsfiddle.net/jmjb4wt4/ –

似乎我不能滾動到綠色的（或再次）滾動到紅色的div。 – hcarreras

我已經做了搗鼓你，你可以做更多的檢查，並添加動畫

var redTouched = false; 
var greenTouched = false; 

function scrollCb() { 
    event.preventDefault(); 

    console.log(event.wheelDelta) 
    if (event.wheelDelta < 0) { 
    if (!redTouched) { 
    $(window).scrollTop($('.red').position().top); 
    redTouched = true; 
    } else if (redTouched && !greenTouched) { 
    $(window).scrollTop($('.green').position().top); 
    greenTouched = true; 
} else if (redTouched && greenTouched) { 
    window.removeEventListener('mousewheel', scrollCb) 
} 
} else { 
window.removeEventListener('mousewheel', scrollCb) 
} 

window.addEventListener('mousewheel', scrollCb);

https://jsfiddle.net/jacobjuul/b0k03wtr/

來源

2016-03-10 10:41:26 JacobSDK

防止自動滾動並滾動到div

回答

相關問題