高さが画面いっぱいの要素を、下にスクロールして画面領域外に出た時に非表示

実現したいこと

高さが画面いっぱいの要素を、下にスクロールして画面領域外に出た時に、上に戻っても非表示にしたい。
ＭＡＣのsafariとファイヤーフォックスで挙動がおかしい

発生している問題・分からないこと

windowsでは問題なく下にスクロールして.tpmainが領域から外に出ると表示されなくなります。
ただ、MACのsafariやファイヤーフォックスだと、
.tpmainが領域から外に出たとたん、ページの下あたりにカクッとすぐに移動してしまいます。

エラーメッセージ

error
1スムーズにスクロールせず、ページの下にパッとすぐに移動してしまう

該当のソースコード

css
1html, body {
2  margin: 0;
3  padding: 0;
4
5}
6
7.tpmain {
8  position: relative;
9  width: 100%;
10  height: 100svh; /* iOS対応。なければ100vhにフォールバック */
11  background: #333;
12  color: #fff;
13  display: flex;
14  justify-content: center;
15  align-items: center;
16  font-size: 2rem;
17}
18@supports not (height: 100svh) {
19  .tpmain {
20    height: 100vh;
21  }
22}
23
24.tpmain.hidden {
25  opacity: 0;
26  visibility: hidden;
27  pointer-events: none;
28    display: none
29}
30
31.main {
32  padding: 100px;
33  background: #f5f5f5;
34}
35    .tpmain-inner {
36  color: white;
37  font-size: 2rem;
38}

html
1<div class="tpmain"><p>この.tpmainの中にはabsoluteの子要素が入ります。</p></div>
2<div class="main">
3<p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
4  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
5  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
6  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
7    <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
8  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
9  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
10  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
11    <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
12  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
13  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
14  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
15    <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
16  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
17  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
18  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
19    <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
20  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
21  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
22  <p>ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。ここにメインのコンテンツが入ります。</p>
23
24</div>
25
26<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

js
1$(window).on("load", function () {
2  let $target = $(".tpmain");
3  let lastScrollTop = 0;
4  let isHidden = false;
5
6  $(window).on("scroll", function () {
7    let scrollTop = $(window).scrollTop();
8    let targetOffset = $target.offset().top;
9
10    if (!isHidden && scrollTop > lastScrollTop) {
11  if (targetOffset + $target.outerHeight() < scrollTop) {
12    $target.addClass("hidden");
13
14    // Safari対応：強制リフロー
15    document.body.offsetHeight;
16    isHidden = true;
17  }
18}
19    lastScrollTop = scrollTop;
20  });
21});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

.tpmainに高さを指定せず、中身が空のばあいはうまくいくことはありました

補足

よろしくお願い申し上げます。
iphoneでも同じ現象でございます

Lhankor_Mhy

2025/04/23 10:03

スクロールアンカリングの問題かもしれません。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_scroll_anchoring/Scroll_anchoring スタックオーバーフローに解決方法がありましたが、Mac環境がないため、試していません。 https://stackoverflow.com/questions/76785693/what-can-i-use-instead-of-overflow-anchor-on-safari

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

回答2件

display: noneを使って要素を非表示にすると、その高さがDOMから消滅するため、スクロール位置が一気にズレる挙動になることがあります。

tpmain がスクロール範囲に含まれていたにもかかわらず、DOMから消えたことで、ブラウザが表示位置を再計算してしまうためだと思われます。

display: none を避け、height: 0 で見た目上消すだけにする
jQueryで無理やりスクロール位置を追うより、IntersectionObserverを使うとバグが起きにくくなるかと思います

などで解決できるかと思いますが、試してみてください！

投稿2025/04/22 14:35

peyo

総合スコア69

yajio

2025/04/22 17:19

height: 0 だと、非表示にならず、真っ白な空間だけ存在します。 height: 0!important にしても同じでした。

yajio

2025/04/22 18:40

peyoさんありがとうございます。参考にさせていただきます！

peyo

2025/04/23 02:03

頑張ってみてください！

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

display:noneでもそんなに違和感なさそうですが・・・

codepen

html
1<style>
2.hide{
3display:none;
4}
5</style>
6<script>
7const crossing=()=>{
8  const observer = new IntersectionObserver(changes=>{
9    for (let change of changes) {
10      if(change.intersectionRatio == 0){
11        change.target.classList.add('hide');
12      }
13    }
14  });
15  observer.observe(document.querySelector('.tpmain'));
16}
17window.addEventListener('pageshow',crossing);
18window.addEventListener('scroll',crossing);
19</script>