chromeでscrollTop()が効かない、取得できない現象に遭遇。

HTML,CSS

コーディングメモです。Googleで調べてみても、どうも解決しなくって、CSSをいじってたら、原因がわかりました。
IE11でもEdgeでもFirefoxでも効くし取得できるのに、chromeだけできなくてとても困りました。

前提条件

HTML5でマークアップするため、

  <!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$("a[href^='#']").on( "click", function(){
var headerHight = $( "header" ).outerHeight();
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - headerHight;
console.log( "body.scrollTop : " + $( "body" ).scrollTop() +
"\nhtml.scrollTop : " + $( "html" ).scrollTop() +
"\ndocument.scrollTop : " + $( document ).scrollTop() +
"\nwindow.scrollTop : " + $( window ).scrollTop() +
"\nhtml,body.scrollTop : " + $( "body, html" ).scrollTop() +
"\ntarget.offset : " + target.offset().top +
"\nposition : " + position +
"\nheaderHight : " + headerHight
); // 確認用
$("body, html").animate({scrollTop:position + "px" }, 100, "swing");
return false; // イベントキャンセル用
});
});
</script>
<style type="text/css">
html,body{
height:100%;
width:100%;
}
header{
position: fixed;
top:0;
left:0;
height:1em;
}
#contents{
padding:1em;
}
</style>
</head>
<body>
<header>ヘッダー部<a href="#link1">リンク1</a></header>
<div id="contents">
<p>
あいうえお<br />
かきくけこ<br />
さしすせそ<br />
<span id="link1">たちつてと</span><br />
<!-- 実際はスクロールが出るまで改行を繰り返していますが、省略します。 -->
</p>
</div>
</body>
</html>

としています。

試したこと

jQueryのバージョンを変更

はじめは、jQuery-1.12.4を利用していました。開発中の対象ブラウザがIE8以降なので、1系統で開発しています。
テスト用にjQuery-3.2.1を適応させてみたのですが、Chromeではスクロールトップが効きません。
IE11、Firefoxでは問題なくscrollTopが効きます。

CSSを疑い始める

jQueryの問題ではなければ、CSSかマークアップにミスがあるのだと思い、CSSを削除してテストしていきました。
結果、下記の部分がだめみたいです。

  html,body{
height:100%;
width:100%;
}

結論

html,bodyに、100%の高さを指定しない。overflow-yやoverflow-xを指定しない。

コメント

タイトルとURLをコピーしました