tips blog

スマホでページ内リンクがずれる

2017年1月27日

根本的に間違っているっぽい
調査中

android(galaxy?)用にviewportを使わずに、htmlにzoomをかけているのだけど
$(window).scrollTop()とか$(‘#id’).eq(0).offset().topとかおかしくなる

【現象】
■スマホでsmoothScrollがずれる
■$(window).scrollTop()の値が違う
■$(‘#id’).eq(0).offset().topの値が違う
■htmlにzoomをかけるとスクロールがずれる

原因はある程度わかったけど、
とりあえず結果(解決方法)から

【解決】
$(‘#id’).eq(0).offset().top 部分を
$(‘#id’).get(0).offsetTop * $(‘html’).css(‘zoom’) に変更

スムーススクロールやスクロールしたらコンテンツがフェードインするJSなどでは
よく$(‘#id’).eq(0).offset().topが使われているから、それをすべて上記に変更

【原因】
原因は数点
(1) htmlにzoomをすると$(window).scrollTop()、$(window).width()、$(window).height() が$(‘html’).css(‘zoom’)倍する ( or $(‘body’).css(‘zoom’))

(2) $(‘#id’).eq(0).offset().topは$(window).scrollTop()によって変わるので使い物にならず(※)

(3) 代わりに$(‘#id’).get(0).offsetTopを使うがこちらは数値は固定されるが、zoomに影響されない値

この(2)、(3)が混乱の原因、$(window).scrollTop、$(window).width、$(window).animate({scrollTopが
zoom倍基準なので、offsettopもzoom倍基準に合わせた

$(‘#id’).get(0).offsetTop * $(‘html’).css(‘zoom’) 

————————————————————————————————————–
【補足】
(※) なぜか$(window).scrollTop()(zoom倍されている)の相対位置(zoomされていない)

□ 通常の場合
zoom = 1.0
$(window).scrollTop() = 400
$(‘#id’).eq(0).offset().top = 700

□ zoom1.5倍の場合
zoom = 1.5
$(window).scrollTop() = 600 (1.5倍)
$(‘#id’).eq(0).offset().top = 900 (700-400+600)(通常時offset().top – 通常時scrollTop() + 1.5倍時scrollTop())

jQuery 3.1.1でもoffset().topの値はそのままなので、
おそらく僕のこの値への認識が違うのかな~?と思ったり
今のところoffset().topより offsetTop * zoomを使用する

この(2),(3)の挙動が混乱の原因で

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です