スクロールさせる組み込みJSでスマフォだと途中で止まってしまう場合
スクロールさせる組み込みJS(scrollTo)をスマートフォンから実行すると、たまにスクロールが途中で止まってしまう不具合が発見されました。(特にAndroidで発生します)
対象
- a-blog cms Ver. 2.6.1.2 以下
対応方法
a-blog cmsのバージョンによって、対応方法が少し異なります。バージョンに適切な対応をお願いします。
Ver. 2.5.0以上
テンプレートでacms.jsを読み込んだあと、以下の記述を追加してください。
<script>
ACMS.Ready(function(){
ACMS.Library.scrollTo = function ( x, y, m, k, offset, callback )
{
y = y + offset;
callback = callback || function(){};
var left = Math.floor(document.body.scrollLeft || document.documentElement.scrollLeft);
var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop);
var remainX = x - left;
var remainY = y - top;
var calc = function ()
{
var h = parseInt(x - remainX);
var v = parseInt(y - remainY);
remainX = remainX*(1-k);
remainY = remainY*(1-k);
if(parseInt(remainX) != 0 || parseInt(remainY) != 0){
window.scrollTo(h, v);
setTimeout(calc,m);
}else{
window.scrollTo(x,y);
callback();
}
};
setTimeout(calc, m);
};
});
</script>Ver. 2.5.0未満
テンプレートでindex.jsを読み込んだあと、以下の記述を追加してください。
<script>
ACMS.Library.acmsLink({});
ACMS.Library.scrollTo = function ( x, y, m, k, offset, callback )
{
y = y + offset;
callback = callback || function(){};
var left = Math.floor(document.body.scrollLeft || document.documentElement.scrollLeft);
var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop);
var remainX = x - left;
var remainY = y - top;
var calc = function ()
{
var h = parseInt(x - remainX);
var v = parseInt(y - remainY);
remainX = remainX*(1-k);
remainY = remainY*(1-k);
if(parseInt(remainX) != 0 || parseInt(remainY) != 0){
window.scrollTo(h, v);
setTimeout(calc,m);
}else{
window.scrollTo(x,y);
callback();
}
};
setTimeout(calc, m);
};
</script>以上の対応を行うことにより、途中でスクロールが止まることはなくなります。
この度はご迷惑をお掛けしてしまい申し訳ございませんでした。
今後ともa-blog cmsをよろしくお願いいたします。