[樣式] 處理畫面高度

看更多

按看更多按鈕後高度不變

只有在Event Listener執行該段程式碼（來源：這裏），即可在按看更多按鈕按下去的時候不改變高度。

const methods = {
  setWindowHeight() {
    const windowHeight = window.innerHeight;
    document.body.style.height = `${windowHeight}px`;
  },
  seeMoreHandler(collapseUnit) {
    /* 調整讓畫面維持原本高度 */
    ...
    this.setWindowHeight();
  },
}

目前試了這段程式碼以後，電腦版的高度不會因為按了看更多影響整體畫面的高度，但手機版依舊跑版，且Google Chrome Dev Tool 與 xcode 兩個分別模擬Chrome, Safari的瀏覽器無法重現錯誤。

const methods = {
  setWindowHeight() {
    const windowHeight = window.innerHeight;
    document.body.style.height = `${windowHeight}px`;
  },
  setWindowHeight() { 
    /* getEle 為該區塊的元素 */
    const blockHeight = document.getElementById(this.getEle).offsetHeight;
    document.body.style.height = `${blockHeight}px`;
  },
}

將程式碼改成上述的形式，並且收合的數量從原本使用computed property控制，改為用 display: none; 控制，目的是讓DOM元素保持固定不變動，減少無法預期的變因。

取得高度

// 方式1
document.body.scrollHeight
// 方式2
document.documentElement.scrollHeight

兩者都可以拿到網站頁面的高度（參考：這裏）。方式1為頁面不含margin的高度；方式2為頁面包含margin的高度。下方為對實際的頁面做操作，操作的方式為：

其結果如下（屏幕高度為目前瀏覽器可視高度）：

取得高度的文章也可以參考這裡。

標頭高度

document.querySelector('.header').offsetHeight + document.querySelector('.header').offsetTop

以目前偵測的頁面高度為例，標頭的高度總長 = Margin的高度（1rem）＋headers 本身高度（65px）。

網頁當前高度

window.scrollY

側邊欄

這邊舉一個充分利用scrollY的實際案例：側邊欄

[狀態1] 剛進入畫面時側邊欄在導覽列下方

[狀態2] 屏幕足夠塞側邊欄: 將滾輪往下拉以後側邊欄置頂

[狀態3] 屏幕不足夠塞側邊欄: 將滾輪往下拉後側邊欄置底

目前需求為，側邊欄會依據長度跟目前的位置改變目前的狀態。這邊利用Javascript toggle class的方式控制側邊欄的狀態。

以上方的程式碼為例，狀態1為top、狀態2為cling-top、狀態3為bottom（樣式的部分先省略不說）。這邊會先算header高度（headersHeight=本身高度+margin高度），再算返回頂端高度(backToTopHeight)，最後再用當前瀏覽器的可視高度（window.innerHeight）扣除header高度跟返回頂端高度 做為可使用高度（availableHeight）。

依據DOM算出來的黑色頁籤總長（tabLength），跟可使用高度（availableHeight）做比較，若tabLength < availableHeight 則呈現狀態2，反之則呈現狀態1。