為什么document.body.scrollHeight返回不同的數字？

Question

我試圖獲取身體的總高度，所以我使用let page = document.body.scrollHeight 控制台告訴我，此滾動鏡頭中身體的高度為4728.120px 。 話雖如此，我正在將page記錄到控制台。 最初我得到4728px 。 然后刷新頁面后，我得到2029px 。 我不明白為什么這個數字會發生變化，尤其是考慮到窗口的大小尚未調整。

  let backgrounds = [
    "background_1.jpg",
    "background_2.jpg",
    "background_3.jpg",
    "background_4.jpg",
    "background_5.jpg",
    "background_6.jpg",
    "background_7.jpg",
    "background_8.jpg",
    "background_9.jpg",
    "background_10.jpg",
    "background_11.jpg",
    "background_12.jpg",
    "background_13.jpg",
    "background_14.jpg",
    "background_15.jpg",
    "background_16.jpg",
    "background_17.jpg",
    "background_18.jpg"
  ],
  i = 0;

  var page       = document.querySelector('body').scrollHeight,
      base       = backgrounds.length,
      height     = page / base,
      increment  = height;
  console.log(page);
  let points = Array(base).fill().map((_, i) => height+=increment)
  window.addEventListener('scroll', () => {
    let scroll = document.documentElement.scrollTop;
    console.log(i,points[i]);
    if (scroll >= points[i]) {
      document.body.style.backgroundImage = `url(${backgrounds[i]})`;
      i++;
    }
  });

Answer 1

我從您的代碼中了解到，您想在用戶向下滾動時更改背景（請注意，您的代碼在向上滾動時不會變回背景）。

基於這個假設，我做了一個工作演示。 只需運行代碼片段並滾動右下角的框即可。

 const backgrounds = [ 'https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg', 'https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg', 'https://images.pexels.com/photos/207171/pexels-photo-207171.jpeg', ]; const mainDiv = document.getElementById('main'); const pageHeight = mainDiv.scrollHeight; const backgroundHeight = Math.round(pageHeight / backgrounds.length); const changePoints = backgrounds.map((value, index) => { const nextPoint = backgroundHeight * index; return nextPoint; }); changePoints.push(pageHeight); console.log(pageHeight, backgroundHeight, changePoints); let currentBackgroundIndex = 0; window.addEventListener('scroll', () => { const scroll = document.body.scrollTop || window.pageYOffset; const nextChangePoint = changePoints[currentBackgroundIndex]; console.log(scroll, nextChangePoint); if (scroll > nextChangePoint) { const currentBackground = backgrounds[currentBackgroundIndex]; currentBackgroundIndex++; mainDiv.style.backgroundImage = `url(${currentBackground})`; console.log('Changing background', currentBackgroundIndex, currentBackground); } });

 html, body { padding: 0; margin: 0; } #main { height: 2000px; padding: 0; margin: 0; }

 <html> <body> <div id="main"></div> </body> </html>

現在，關於您的問題，為什么scrollHeight會發生變化。 我無法使用您給定的代碼復制行為。 我最好的猜測是，您可能正在X時刻檢查它，並且主體可能仍在解析和加載元素。 例如，假設您加載了兩個圖像，每個圖像分別為50px和您的身體為100px。 如果您在沒有圖像的情況下測量scrollHeight，則會得到100； 如果加載一幅圖像后為150像素，而最末尾為200像素。

一些避免這種情況的技術：

為所有元素增加高度。
延遲執行該代碼，或在幾秒鍾后重新計算。

為什么document.body.scrollHeight返回不同的數字？

問題描述

1 個解決方案

解決方案1
0 2018-09-30 15:16:09

為什么document.body.scrollHeight返回不同的數字？

問題描述

1 個解決方案

解決方案1 0 2018-09-30 15:16:09

解決方案1
0 2018-09-30 15:16:09