スクロールバーがページの高さの特定のパーセンテージに達したときにJavaScript関数をトリガする方法

Question

JS関数を特定のページスクロール（たとえば80％）で発生させるプレーンJavaScriptで書かれたソリューションを探しています。私はWaypointsのような何かを達成するために、750行のコードやjQueryを使用することを望んでいます。

スクロールポイントが高さの80％を超えると、ウィンドウの高さを決定してコールバックをトリガーすると仮定しています。

ここで必要なのは、一度トリガーするだけです。私が持っている他の懸念は、スクロールパーセンテージを常にポーリングするという潜在的なパフォーマンス上の問題です。これは有効な懸念事項ですか？

Answer 1

スクロール回500msの間、ページのスクロールをチェックする方法、および意志1回のみ実行：

var throttledListener = throttle(scrollListener, 500); 
 
window.addEventListener('scroll', throttledListener); 
 

 
function throttle(func, delay) { // allows [func] to run once every [delay] ms 
 
    var func = func.bind(func), 
 
     last = Date.now(); 
 
    return function() { 
 
     if (Date.now() - last > delay) { 
 
      func(); 
 
      last = Date.now(); 
 
     } 
 
    } 
 
} 
 
function scrollListener() { 
 
    console.log('scrolled'); 
 
    var threshold = document.body.clientHeight * 0.6; 
 
    if (window.pageYOffset >= threshold) { 
 
     alert('user scrolled to threshold; listener removed'); 
 
     window.removeEventListener('scroll', throttledListener); 
 
    } 
 
}

<div style="height:2000px;width:100%">tall div</div>

Answer 2

あなたはonscroll

機能trigerScroll（EV）を使用することができます{ 場合（window.pageYOffset> 400）、アラート（ 'ユーザーには、少なくとも400ピクセルをスクロールしました！'）; } window.onscroll = trigerScroll;

編集：

あなたが得ることができ、この

var body = document.body, 
    html = document.documentElement; 

var height = Math.max(body.scrollHeight, body.offsetHeight, 
         html.clientHeight, html.scrollHeight, html.offsetHeight); 

ソースのような文書の高さ：How to get height of entire document with JavaScript?