2017-06-01 43 views
-1

我想在下面的滾動事件偵聽器中只運行一次if語句。現在我認爲它不起作用,因爲每次有滾動操作時,函數都會運行,將scroll25復位爲false,因此每次都使if語句成爲真。我可以強制scroll25的布爾值在這個函數的作用域之外是真的,這樣滾動監聽器可以繼續運行,並且只有if語句可以工作一次嗎?在JS函數範圍之外強制布爾值

document.addEventListener("scroll", scrollTracking); 

function scrollTracking() { 
    var scroll25 = false; 

    // Get client heights, 100%, 25% and 50% 
    var clientHeight = document.body.clientHeight; 
    var perc25 = clientHeight * .25; 
    var perc50 = clientHeight * .50; 
    console.log('25%: ' + perc25 + ', 50%: ' + perc50); 

    // Log scroll position from top of document. 
    var scrollTop = document.body.scrollTop; 
    console.log(scrollTop); 

    // If scroll is within the clientHeight range of 25% - 50%, log 
    // message once. 
    if (scrollTop >= perc25 && scrollTop < perc50 && !scroll25) { 
    console.log("25% Reached. Success."); 
    scroll25 = true; 
    } 
} 

Codepen:https://codepen.io/anon/pen/ZyzBVY

+0

如何['document.removeEventListener( 「滾動」,scrollTracking)' ](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)? –

+0

這有效,但是我的上述功能正在進行中,並且我計劃添加額外的if語句,以便我需要聽衆注意。 (例如達到clientHeight 50-75%範圍的日誌)。在這種情況下,我不想一起阻止聽衆。 – subwaymaps

回答

1

我只想聲明它的功能之外

document.addEventListener("scroll", scrollTracking); 

var scroll25 = false; 

function scrollTracking() { 


    // Get client heights, 100%, 25% and 50% 
    var clientHeight = document.body.clientHeight; 
    var perc25 = clientHeight * .25; 
    var perc50 = clientHeight * .50; 
    console.log('25%: ' + perc25 + ', 50%: ' + perc50); 

    // Log scroll position from top of document. 
    var scrollTop = document.body.scrollTop; 
    console.log(scrollTop); 

    // If scroll is within the clientHeight range of 25% - 50%, log 
    // message once. 
    if (scrollTop >= perc25 && scrollTop < perc50 && !scroll25) { 
    console.log("25% Reached. Success."); 
    scroll25 = true; 
    } 
}