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

コーディングメモです。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を指定しない。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする