2011-06-23 17 views
5

$(window).scroll()がページの読み込みを開始しないようにする方法はありますか?

Firefox 4で次のコードをテストすると、マウスを抜いても起動します。

jQuery(document).ready(function($){  
$(window).scroll(function(){ 
       console.log("Scroll Fired"); 
    }); 
}); 
+0

あなたがスクロールを防ぐために必要です任意の例? – genesis

+0

スクロールが行われていないときにスクロールイベントが発生しないようにするだけです。 –

+2

ウィンドウスクロールイベントhttp://ejohn.org/blog/learning-from-twitter/ – redsquare

答えて

9

scrollイベントはマウスとは無関係ですが、新しいドキュメントのスクロール位置が設定されるたびに呼び出されます。そしておそらく、ドキュメントがロードされるときにその位置が設定されます(アンカーでロードするかもしれません)。また、ユーザーがキーボードのカーソルキーを押した場合も同じです。なぜ最初のscrollイベントを無視する必要があるのか​​わかりませんが、pageYOffsetがゼロの場合にのみ実行したいと思います。それは簡単です:

var oldPageYOffset = 0; 
$(window).scroll(function(){ 
    if (window.pageYOffset != oldPageYOffset) 
    { 
    oldPageYOffset = window.pageYOffset; 
    console.log("Window scrolling changed"); 
    } 
}); 

:上記調整する必要がありますので、MSIEはwindow.pageYOffset性質を持っていません。たぶん、jQueryはクロスブラウザーの代替手段を提供するかもしれません。

+0

これはほとんどありません。文字通り、最初の実行を防ぐだけです。 –

+3

@Mild Fuzz:達成する方法よりも、達成したいことを説明すれば、より良い回答が得られます。いずれの場合でも、 'oldPageYOffset'を' window.pageYOffset 'で初期化することもできます(最初のスクロールイベントを無視することが最良の解決策だと思いますが、そうではないかもしれません) 'もしあなたが絶対に最初の' scroll'イベントを無視したいのならば。 –

0

確かに、負荷の後まで読み込まないでください。それを500ミリ秒の睡眠のためのコールバックにする。

+0

には何も触れないでください。上記のコードは 'jQuery(document).ready(function($){ ' –

+0

がサンプルコードに追加されました –

6

これは私が行った解決策でした。どんな改善も感謝しています。

var scroll = 0; 
    $(window).scroll(function(){ 
        if (scroll>0){ 
        console.log("Scroll Fired"); 
        } 
        scroll++; 
    }); 
+0

良い解決策!:) – Steve

3

スクロールイベントがスクロールしてページを更新、または直接アンカーに移動するときにのみとき、すべての負荷に発生しません。

答えの多くは、最初に呼び出されたときを無視することを提案しています。ページが最初にスクロールされないと、有効なスクロールは無視されます。

//Scroll the page and then reload just the iframe (right click, reload frame) 
 

 

 
//Timeout of 1 was not reliable, 10 seemed to be where I tested it, but again, this is not very elegant. 
 
//This will not fire initially 
 
setTimeout(function(){ 
 
    $(window).scroll(function(){ 
 
    console.log('delayed scroll handler'); 
 
    }); 
 
}, 10); 
 

 
//This will fire initially when reloading the page and re-establishing the scroll position 
 
$(window).scroll(function(){ 
 
    console.log('regular scroll handler'); 
 
});
div { 
 
    height: 2000px; 
 
    border: 1px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
</div>

関連する問題