前提
勉強のため、普段jQueryで対応しているものをJavaScriptで作成してみました。
作成したのは、ページ内スクロールになります。(目次やページTOPで使用する予定です。)
発生している問題
作成しWebサイトに実装したところ重くなってしまい動きも悪くなりました。
Chrome Developer Toolsで原因を探ろうとしましたが、探ると止まってしまい計測できません。
このような質問で申し訳ございませんが、少しでも解決できるでしょうか。
よろしくお願いします。
該当のソースコード
const ankerClickPageMove = function() { //定数 const anker = document.querySelectorAll('a[href^="#"]:not([target="_blank"])'), ankerNum = anker.length, max = 100, interval = 10; //アニメーション function easeOut(p) { return p * (2 - p); }; //位置取得 function getTargetTop(elm) { const href = elm.getAttribute('href'), target = document.querySelector(href), info = target.getBoundingClientRect(), posY = info.top + window.pageYOffset; return posY; }; //位置情報へ移動 function setTargetMove(elm) { //変数 let progress = 0, goal = 0, action = null; //定数 const start = window.pageYOffset, //スタート位置 pos = getTargetTop(elm), //最終位置 diff = pos - start, upOrDown = diff <= 0, move = function() { progress++; goal = start + (diff * easeOut(progress / max)); window.scrollTo(0, goal); // 目的位置より進んでいなければ続行 if ( (upOrDown && pos < goal) || (!upOrDown && goal < pos) ) { action = setTimeout(move, interval); } else { clearTimeout(action); progress = null; goal = null; action = null; } }; action = setTimeout(move, interval); }; //クリックイベントをセットする function setClickEvent() { for(let i = 0; i < ankerNum; i++) { const _self = anker[i]; _self.addEventListener('click', function(e) { e.preventDefault(); setTargetMove(this); }); } }; setClickEvent(); } ankerClickPageMove();
追記1
アドバイスを元に修正してみました。
前より軽くなり、計測もできるようになりました。
ただ、計測時は重くないブラウザが止まってしまいますが。。。
const ankerClickPageMove = () => { //定数 const anker = document.querySelectorAll('a[href^="#"]:not([target="_blank"])'), ankerNum = anker.length, max = 50, interval = 10; //アニメーション function easeOut(p) { return p * (2 - p); }; //位置取得 function getTargetTop(elm) { const href = elm.getAttribute('href'), target = document.querySelector(href), info = target.getBoundingClientRect(), posY = info.top + window.pageYOffset; return posY; }; //位置情報へ移動 function setTargetMove(elm) { //変数 let progress = 0, goal = 0, action = null; //定数 const start = window.pageYOffset, //スタート位置 move = function() { let pos = getTargetTop(elm), //最終位置 diff = pos - start, upOrDown = diff <= 0; progress++; goal = start + (diff * easeOut(progress / max)); window.scrollTo(0, goal); // 目的位置に到達したらSTOP if ((upOrDown && pos >= goal) || (!upOrDown && goal >= pos)) { clearInterval(action); progress = null; goal = null; action = null; } }; action = setInterval(move, interval); }; //クリックイベントをセットする function setClickEvent() { for(let i = 0; i < ankerNum; i++) { const _self = anker[i]; _self.addEventListener('click', function(e) { e.preventDefault(); setTargetMove(this); }); } }; setClickEvent(); }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/30 07:35