2017-06-30 7 views
0

私はユーザーがスクロールするときを検出したいと思います。私はこれについていくつかの質問があることを知ったが、それらの答えは私を助けなかった。ここ
は私のコードです:スクロールアップまたはダウンのイベント

var up = document.getElementById('up'); 
var down = document.getElementById('down'); 
function onScroll() { 
if (view.scrollTop > 0) { 
    console.log("up"); 
} 
if (view.scrollTop < 0) { 
    console.log("down"); 
} 
} 
var view = document.getElementById('container'); 
view.addEventListener("wheel", onScroll); 

EDIT:「スクロール」の代わりに「ホイール」は私のために働いていません...私は「ホイール」を持っている必要があります。私が作ったとき:

if (view.scrolltop <=0) { 
    console.log("down"); 
} 

私は自分のコンソールに「ダウン」しますが、スクロールすると表示されます。私は画面の100%で私のページを持っており、私はスクロールバーを持っていない(と私は持っていない)。

EDIT2:ここで私の問題を解決したコードです!

window.addEventListener('wheel', function (e) { 
if (e.deltaY < 0) { 
    console.log("scrolling up"); 
} 
if (e.deltaY > 0) { 
    console.log("scrolling down"); 
} 
}); 
+2

'view.addEventListener( "スクロール"、onScroll);' –

+0

あなたにもjqueryのスクロールを使用することができます。https://api.jquery .com/scroll / –

答えて

0

あなたがちょうどあなたのページの上部または要素からのオフセットを決定するために

.scrollTop 

を使用しています。、スクロールイベントを取得するために

window.onscroll 

を使用することができます

window.onscroll = function() { scrollFunction() }; 

scrollFunction() { 

//code to check if it is scrolling up or down 
} 

これは役に立ちました。

0

私はjqueryのメソッド@Belmin Bedakさんのコメントを支える

var last = 0; 
$(window).scroll(function(event){ 
    var Pos = $(this).scrollTop(); 
    if (Pos > last){ 
     // down 
    } else { 
     // up 
    } 
    last = Pos; 
}); 
0

でこれをやりました。

利用.scroll代わりの.wheel

var up = document.getElementById('up'); 
 
var down = document.getElementById('down'); 
 
function onScroll() { 
 
if (view.scrollTop > 0) { 
 
    alert("up"); 
 
} 
 
if (view.scrollTop <= 0) { 
 
    alert("down"); 
 
} 
 
} 
 
var view = document.getElementById('container'); 
 
view.addEventListener("scroll", onScroll);
div { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 100px; 
 
    overflow: scroll; 
 
}
<div id='container'>a<br> 
 
b<br> 
 
c<br> 
 
d<br> 
 
e<br> 
 
f<br> 
 
g<br> 
 
h<br> 
 
i<br> 
 
k<br> 
 
l<br> 
 
</div>

関連する問題