如何手動刪除頁面底部的空白

Question

https://demo.joinspheres.com

我正在制作一個演示滾動 animation 網站並讓它按照我想要的方式工作（每個 animation 在下一個之后立即發生），大量空白被添加到頁面底部。

主要問題是我必須添加style="top:-100vh;" 到每個“幻燈片”以使 animation 立即生效，但它的大小加倍。

有沒有辦法手動告訴瀏覽器在哪里停止頁面？ 還是設置滾動動畫的更好方法？ 不會在這里問我是否還有其他嘗試。

這是說明問題的剝離代碼：https://github.com/con266667/spheres-demo/tree/whitespace-issue

我正在使用 ScrollMagic，但我編寫了自己的 js 包裝器。

提前致謝

Answer 1

這可能會奏效。 將以下代碼添加到您的<script>部分。 如果您添加更多滾動頁面，請不要忘記更改變量 amountOfPages。

它的作用是：它獲取客戶端的高度（當時可以顯示一個滾動頁面）並將其乘以您擁有的滾動頁面的數量，然后將頁面的高度設置為這個固定數字。

function resizeBodyHeight() {
  let amountOfPages = 9;
  document.body.style.height =  window.innerHeight*(amountOfPages + 1)  + "px";
}

window.addEventListener('resize', resizeBodyHeight);
window.addEventListener('load', resizeBodyHeight);

編輯：您可以替換行let amountOfPages = 9; 與以下行。 這將使 JavaScript 確定滾動頁面本身的數量。

let amountOfPages = document.getElementsByClassName("scrollmagic-pin-spacer").length;

Answer 2

有效的解決方案是使頁面固定，然后將 ScrollMagic 觸發器設置為一個新元素，其高度成為整個頁面的高度（因為所有其他元素都是固定的）。 這樣我可以輕松更改頁面高度。

我還將所有動畫放在同一時間軸上。