経緯
まじめなWEB技術の研究以外にも、ちょっとした遊びを
- スクロールのスピード率を計測サイトの向上のため、ページ単位でも、ユーザーがどの位滞在しているのか?どのくらいスクロールしているのか?など詳細なデータを記録しています。そんな時、ちょっとがっかりするのが、どうみても、スクロール早すぎだろ、これじゃ記事読めないよね。ってデータですね。
そんなわけで、あんまり早いスクロールはちょっと文句いってやるかって感じで開発してみました。
llet startTime = null;
let startScrollY = null;
let lastScrollY = window.scrollY;
let isScrolling = false;
function trackScroll() {
const currentScrollY = window.scrollY;
if (currentScrollY !== lastScrollY) {
// スクロール中
if (!isScrolling) {
startTime = performance.now();
startScrollY = currentScrollY;
isScrolling = true;
}
console.log(`スクロール中
lastScrollY: ${lastScrollY}
currentScrollY: ${currentScrollY}
`);
lastScrollY = currentScrollY;
requestAnimationFrame(trackScroll);
} else if (isScrolling) {
// スクロールが停止したと判断 currentScrollY と lastScrollYが同じ
console.log(`スクロール停止
lastScrollY: ${lastScrollY}
currentScrollY: ${currentScrollY}
`);
const endTime = performance.now();
const elapsed = endTime - startTime;
const distance = Math.abs(lastScrollY - startScrollY);
console.log(`スクロール時間: ${elapsed.toFixed(2)}ms`);
console.log(`スクロール距離: ${distance}px`);
// 状態リセット
startTime = null;
startScrollY = null;
isScrolling = false;
} else {
// スクロールが再開されるまで監視
requestAnimationFrame(trackScroll);
}
}
// 監視を開始
trackScroll();
このサイトで紹介しているコード、プログラムなどは個人の学習目的で作成されたものであり、いかなる保証も行いません。
利用はすべて自己責任でお願いします。
ただし、このページで紹介しているプログラムやビジュアルなどはご依頼いただければ実装を賜ります。
お問い合わせはこちら