スマホで最上部までスクロールし、さらに引っ張ると更新されたり、データが読み込まれたりするUIがよくあります。
そのサンプルを作ってみました。
スマホの場合、目一杯スクロールするとJSで取れるスクロールの値がマイナスになるので、それを検知して発火させます。
JSはこちら
v=0; $(window).on("scroll",function() { st = $(this).scrollTop(); if(st < -80 && v === 0){ v=1; $("#demo_text").slideDown().delay(2000).slideUp(1000,function(){ v=0; }); } });
Now loadind... 的な表示
表示されるHTMLはこちらです。
<div id="demo_text">Now loadind... 的な表示</div>
このページにも実装してあるので、スマホで画面上部を強めにひっぱり下げてみてください。