element.clientHeightで要素の正常な高さが取得できない

前提・実現したいこと

ページの慣性スクロールを実装するスクリプトを書いています。
その際、element.clientHeightで要素の高さが正常に取得できず、ズレが発生します。

発生している問題

position:fixed;させた要素A（コンテンツ全体のラッパー要素）の高さを取得し、bodyにその高さを適用させています。
しかしその値が実際の要素Aの高さとずれており、ページ最下部に隙間ができてしまいます。

下記デモでは実際の要素A（.scrollWrapボックス）の高さよりも10px大きい値が取得されてしまい、結果最下部に10px分の空白が生まれています

該当のソースコード

html
1<body>
2<div class="fixedNav">
3  <p>Smooth mousewheel scroll -simple-</p>
4</div>
5<div class="scrollWrap">
6  <div class="section">
7    <p>section1</p>
8  </div>
9  <div class="section">
10    <p>section2</p>
11  </div>
12  <div class="section">
13    <p>section3</p>
14  </div>
15  <div class="section">
16    <p>section4</p>
17  </div>
18  <div class="section">
19    <p>section5</p>
20  </div>
21  <div class="section">
22    <p>section6</p>
23  </div>
24  <div class="section">
25    <p>section7</p>
26  </div>
27  <div class="section">
28    <p>section8</p>
29  </div>
30  <div class="section">
31    <p>section9</p>
32  </div>
33  <div class="section">
34    <p>section10</p>
35  </div>
36</div>
37</body>

css
1@import url("https://fonts.googleapis.com/css?family=Oswald:600&display=swap");
2* {
3  margin: 0;
4  padding: 0;
5  box-sizing: border-box;
6}
7
8body {
9  padding: 0;
10  margin: 0;
11  font-family: "Oswald", sans-serif;
12  letter-spacing: 0.1rem;
13}
14
15.fixedNav {
16  position: fixed;
17  z-index: 10;
18  width: 100%;
19  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
20}
21.fixedNav p {
22  text-align: center;
23  padding: 1rem;
24  font-size: 1.5rem;
25  letter-spacing: 0.2rem;
26  background: #fff;
27}
28
29.scrollWrap {
30  position: fixed;
31  width: 100%;
32  transition: transform 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
33}
34
35.section {
36  padding: 15rem 0;
37  color: #1e1f26;
38  font-size: 3rem;
39  text-align: center;
40}
41.section:nth-of-type(odd) {
42  background: #fb6542;
43}
44.section:nth-of-type(even) {
45  background: #ffbb00;
46}

js
1const scrollWrap = document.querySelector('.scrollWrap');
2const body = document.querySelector('body');
3const scrollWrap_h = scrollWrap.clientHeight;
4const wrapStyle = scrollWrap.style;
5const bodyStyle = body.style;
6console.log(scrollWrap_h);
7if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
8  window.addEventListener('load',function(){
9    bodyStyle.height = scrollWrap_h + 'px';
10  });
11  window.addEventListener('scroll',function(){
12    wrapStyle.transform = 'translate3d(0,' + -window.scrollY + 'px,0)';
13  });
14} else {
15  document.addEventListener('DOMContentLoaded',function(){
16    wrapStyle.position = 'static';
17  });
18}

codepen
https://codepen.io/mycreatesite/pen/QRpmoG

試したこと・状況

codepen上でもローカルでも発生する（＝codepen環境での不具合ではないと思われる）
codepen上では通常リロードすれば正常値になるが、スーパーリロードするとやはりズレる
フォントの種類・フォントサイズによってズレの値が大きく変わる
ズレはプラスの値で、マイナスになることは無い
offsetHeightも試してみたが、効果なし。

どなたかお知恵をお借り出来ますでしょうか。

行動規範の内容に同意します

回答1件

自己解決

下記のようにclientHeightをload後に取得することで正常な高さが取得できました。
ウェブフォントが読み込まれる前にclientHeightが走っていたことが原因だったようです。

js
1const body = document.querySelector('body');
2const scrollWrap = document.querySelector('.scrollWrap');
3const bodyStyle = body.style;
4const wrapStyle = scrollWrap.style;
5
6if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
7  window.addEventListener('load',function(){
8    const scrollWrap_h = scrollWrap.clientHeight; //load後にclientHeightを取得
9    bodyStyle.height = scrollWrap_h + 'px';
10  });
11  window.addEventListener('scroll',function(){
12    wrapStyle.transform = 'translate3d(0,' + -window.scrollY + 'px,0)';
13  });
14} else {
15  document.addEventListener('DOMContentLoaded',function(){
16    wrapStyle.position = 'static';
17  });
18}