TypeError：無法讀取 null 的屬性（讀取“scrollHeight”）| Angular 11

Question

我真的希望你們中的一些人能幫助我解決這個令人頭疼的問題。 我需要擁有頁面的滾動高度，但我只得到了其中的 1/3。

setSize() {
    let DOMScrollable = this.elementRef.nativeElement.querySelector("div[data-scroll]");
    document.body.style.height = DOMScrollable.scrollHeight + "px";
}

console.log(this.dataScroll.nativeElement.scrollHeight)
// 1177

分析DOMSrollable.nativeElent ， scrollHeight的實際大小是 4587。因此，使用上面的 function 我不能 go 向下，因為滾動停止在 1177px。

這是我正在處理的（我的 Typescript/Angular 12）的抽象。 這是 HTML（在我的頁面上我有 8 張圖片）

<main main>
  <div data-scroll #dataScroll>
        <div class="page">
            <header>
                    <h1>Oceans</h1>
                    <img src="../assets/images/header.jpg" alt="">
            </header>
            <div class="grid">
                <a href="#" class="item item_v">
                    <div class="item__image">
                            <img src="../assets/images/1.jpg" alt="">
                            <div class="item__meta">December 23, 2020</div>
                    </div>

                    <h2 class="item__title">Octopus punches fish in the head (just because it can)</h2>
                    <p>Octopuses sometimes partner with fish to hunt, but the partnership comes with risks (for the fish, that is).</p>
                </a>
            </div>
         </div>
  </div>
</main>

提前致謝

Answer 1

嘗試使用getBoundingClientRect而不是scrollHeight 。 例如：

setSize() {
    let DOMScrollable = this.elementRef.nativeElement.querySelector("div[data-scroll]");
    const rect = DOMScrollable.getBoundingClientRect();
    document.body.style.height = rect.height + "px";
}

console.log(rect.height)
// 4587