Javascript 在你向下滚动地址栏（Chrome和Safari）向下滑动后，有没有办法保持100vh？

我现在正在这个测试网站（）上工作，在首页上有一个带有100vh的hero标题，它是用javascript修改的。在移动设备上，我遇到了这个问题，当Safari和Chrome上的地址栏向下滑动时，hero标题的高度会拉伸并变得更高。因此，每当地址栏上下滑动时，整个网站都会产生这种跳跃和滞后的效果。有没有办法防止由于地址栏的原因导致高度拉伸

这是一个网站，其中一个英雄头的行为正如我所希望的那样

我检查了这个答案：，但似乎没有任何效果

==================================我的代码

英雄头部分的HTML

           <div class="heroheader">
                <div class="heroheader__image" id="parallax1">
                    <div class="pattern"></div>
                </div>
                <div class="container container--top">
                    <div class="heroheader_headline">
                        <p class="heroheader_headline__main">FREE<br>
                        YOURSELF</p>
                        <p class="heroheader_headline__sub">己の限界を超えろ。</p>
                    </div>
                    <div class="heroheader__scrollbutton">
                        <button class="scrollvertical scroll-down" type="button"><span class="scrollvertical__txt">SCROLL</span></button>
                    </div>
                    <div class="breaking-news-ticker" id="news_flash">
                        <div class="bn-label">
                            NEWS
                        </div>
                        <div class="bn-news">
                            <ul>
                                <li>
                                    <a href="#">1.2. Breaking NEWS 2</a>
                                </li>
                                <li>
                                    <a href="#">1.3. Breaking NEWS 3</a>
                                </li>
                                <li>
                                    <a href="#">1.4. Breaking NEWS 4</a>
                                </li>
                            </ul>
                        </div>
                        <div class="bn-controls">
                            <button aria-label="Prev_news"><span class="bn-arrow bn-prev"></span></button> <button aria-label="Next_news"><span class="bn-arrow bn-next"></span></button>
                        </div>
                    </div>
                </div>
            </div>

生成高度的javascript代码

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

请原谅我事先缺乏信息，如果有的话。

---

我将感谢任何帮助。谢谢。

请同时提供您的HTML代码。

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});