根本的に間違っているっぽい
調査中
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)の挙動が混乱の原因で
RELATED
-
2023年12月13日
-
2023年8月24日
-
2023年8月1日
-
2021年8月25日
コメントを残す