全高英雄背景圖像在移動滾動上調整大小

Question

我遇到了一個問題，當用戶在移動設備上滾動時，由於 URL 欄，我為全高英雄設置的背景圖像正在改變大小。 當用戶滾動時，這會導致圖像捕捉到新的大小，從而產生不和諧的效果。 這似乎是使用100vh時的常見問題，因此我嘗試了多種解決方法，包括使用 js 在頁面加載時獲取 window 大小和手動設置英雄的高度。 我在下面有一個使用 Bulma 的示例，它使用100vh作為其is-fullheight fullheight 英雄。

代碼： https://codepen.io/Stetzon/pen/JjdQmzN

演示： https://cdpn.io/Stetzon/debug/JjdQmzN/RBMOJXzxwDbk （必須在手機上才能看到效果）

Answer 1

這是我需要為我的項目做的js。

當 url 條可見時，它會為您提供屏幕的視口高度。

var height = Math.min(document.documentElement.clientHeight, window.innerHeight || 0);