例えばコンテントのサイズが
width: 100vw;
height: 100vh;
の時(スクロール不可)にスクロールの上下やスワイプの左右を判定するこは可能でしょうか?
1 件の回答
Firefoxでのみ確認しましたが、今時のブラウザであればwheel
イベント(WheelEvent)でスクロール量を取得できると思います。
deltaMode
はスクロールがピクセル単位(0)、行単位(1)、ページ単位(2)なのかを示しますが、ユーザーのスクロール・スワイプ量を知りたいのであれば無視して大丈夫だと思います。
dsip = document.getElementById('disp');
let x=0,y=0,z=0;
document.addEventListener('wheel',(e)=>{
x += e.deltaX;
y += e.deltaY;
z += e.deltaZ;
disp.innerHTML =
'x:' + e.deltaX + '<br>' +
'y:' + e.deltaY + '<br>' +
'z:' + e.deltaZ + '<br>' +
'合算' + '<br>' +
'x:' + x + '<br>' +
'y:' + y + '<br>' +
'z:' + z + '<br>' +
'scroll mode:' + e.deltaMode;
},false);
body {
height: 1vw;
width: 1vw;
overflow: hidden;
}
#disp {
position: absolute;
top: 30px;
left: 30px;
}
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<div id=disp>disp</div>