chromeの開発者ツールの「Sources」で検出される数字に関して

Question

下記のように開発者ツールで検出した数値では、[5024]と出てくるのですが、
実際のコーディングでは、5000pxとしてしています。なので、ここは5000pxにならないとおかしいのですが、
この24pxが出るのはjsの組み方がおかしいからでしょうか？

それともこういう誤差は出るものなのでしょうか？

HTML

<div class="page-top">
  <a href="#" class="page-top_link"></a>
</div>

<div class="container">
  <main>
    <p>コンテンツの高さは5000</p>  
  </main>
  <footer class="footer">
    <p>フッター</p>
  </footer>
</div>

CSS

.page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: 0.5s;
}
.page-top_link {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  background-color: #cccccc;
}
.page-top_link:before {
  content: "";
  display: block;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
.is-hidden {
  visibility: hidden;
  opacity: 0;
}
main {
  height: 5000px;
  text-align: center;
}
.footer {
  height: 100px;
  background-color: #ff5757;
  padding: 20px;
  color: #fff;
  text-align: center;
}

js

$(function() {

  
  var elem = $(".footer");
  var banner = $(".page-top");

  var elemO = elem.offset().top; 　　　 // ページトップからの要素の高さを取得

  var windowH = $(window).height(); 　　 // ウィンドウの高さを取得
    
  $(window).on("scroll", function() {　　// スクロールした値を取得

    
    var windowS = $(window).scrollTop(); // 現在の位置

    
    if(windowS > elemO - windowH + (windowH / 2) ){　　// 要素が見えたら動く
      banner.addClass("is-hidden");
    }else{
      banner.removeClass("is-hidden");
    }
      
  });
    
});

Comments

[m.ts10806]

他者が再現できるよう実際のコードをテキストで提示してください。

[m.ts10806]

>実際のコーディングでは、5000pxとしてしています。

提示されたコード内にはどこにも5000と明示されていません

[rrrangas]

すみません。色々触っていて数値を変えていました。今、戻しました。
<main>の高さを5000にしています。

Answer 1

mainタグ内のP要素にブラウザのデフォルトでmarginが設定されている影響だと思われます。
(ちなみにchromeでやってみたら5016になりました)
リセットCSSを入れるなりP要素のmarginを0にしてみては。

Answer 2

[Computed] タブ

Chrome Developper Toolsの [Computed] タブを開いて、下記要素を順番に確認していけば、原因が判明するかと思います。

• footer要素
• footer要素の兄要素もしくは兄要素の子孫要素
• footer要素の親要素もしくは祖先要素(html要素、body要素を含む)

期待外の margin, padding, height が指定されていた場合、[Styles] タブを開いて、該当スタイルを特定して下さい。
その後、該当スタイルを書き直すか、より詳細度の高いスタイルを指定して上書きしてやればいいでしょう。

デフォルトスタイルシートの上書き

ブラウザの中には、デフォルトスタイルシートで、html要素もしくはbody要素に margin or padding を指定する実装があります。
以下は私がGoogle Chrome v103.0.5060.134のChrome Developper Toolsで確認したデフォルトスタイルシートです。

/**
 * User-Agent Style Sheet (Google Chrome v103.0.5060.134)
 */
body {
    display: block;
    margin: 8px;
}

デフォルトスタイルシートは、制作者CSSで上書き出来ます。

html,body{
  margin: 0;
  padding: 0;
}

以下、参考リンク。

• 各HTML要素のdisplayプロパティの初期値の仕様は、どこに記述されているか？

Re: Iori さん