網頁顯示彈出畫面同時禁止捲動主畫面的技巧

作法應該有相當多種，這裡提兩種我從一些網站中觀察到的作法。

設定 body 為 overflow:hidden

• 線上觀看的例子
• 完整原始碼

準備兩個 div, 一個是 main content (id=main), 一個是 pop-up (彈出畫面), 平常隱藏 pop-up, 要顯示 pop-up 時，設 body 的 overflow: hidden，並顯示 pop-up。這樣主頁面就不能捲了。

關掉 pop-up 時再設 body 的 overflow: visible (預設值), 主頁面就可以捲了。

程式碼像這樣:

var popup = document.getElementById('popup');
function show_popup() {
  popup.style.display = 'block';
  document.body.style.overflow = 'hidden';
}

function close_popup() {
  popup.style.display = 'none';
  document.body.style.overflow = 'visible';
}

• 優點: 簡單，很多網站這麼作
• 缺點: 部份瀏覽器不支援, 例如 iOS 6

對 main content 為 position:fixed

• 線上觀看的例子 (我有修改 #popup 的 height, 讓它可以在這網站正常顯示，其餘和下行的原始碼一樣)
• 完整原始碼

這個作法比較複雜，是拆解 facebook 彈出照片的頁面得知的。

準備兩個 div, 一個是 main content (id=main), 一個是 pop-up (彈出畫面), 平常隱藏 pop-up, 要顯示 pop-up 時，設 main content 的 position: fixed，並顯示 pop-up。這樣主頁面就不能捲了。但是因為 scroll offset 歸零 (content height 改變的副作用), 要自己維護 scroll offset (後述)。

這個作法與上個作法有幾點差異:

• 網頁主動管理頁面大小, 造成主頁面不能捲; 上個作法是設 body 為 overflow: hidden, 隱含瀏覽器會禁止捲動主頁面。這個規則有點詭異，多數瀏覽器應該有這麼作吧。
• 因為 main content 變成 position: fixed, 它的高度也就變成 viewport height, 然後 body 的 height 也因此縮水, 最後主頁面的內容高度和 viewport height 一樣，所以就不能捲。但也因如此, scroll offset 會歸零，若之前有捲動主頁面才顯示彈出畫面, 背景的主頁面會跑掉，所以要自己記下 scroll offset, 並在 main content 設 top = -scrollY, left = -scrollX, 這樣畫面才會定住。取消彈出畫面後，要再自己 scroll 回當初的位置。程式碼如下:

var main = document.getElementById('main');
var popup = document.getElementById('popup');
var scrollX = 0;
var scrollY = 0;
function show_popup() {
  popup.style.display = 'block';
  scrollX = window.pageXOffset || document.documentElement.scrollLeft;
  scrollY = window.pageYOffset || document.documentElement.scrollTop,
  /*
    Set "fixed" and then the height becomes to fit to the window height.
    and then the body height becomes window height.
    You can observe the change by typing "document.body.scrollHeight" in DevTools console
  */
  main.style.position = 'fixed';
  main.style.left = -scrollX;
  main.style.top = -scrollY;
}

function close_popup() {
  popup.style.display = 'none';
  delete main.style.left;
  delete main.style.top;
  main.style.position = 'static';
  window.scrollTo(scrollX, scrollY);
}

• 優點: 跨瀏覽器 (大概吧，不然 facebook 不會這麼作)
• 缺點: 寫起來比較囉嗦, 而且顯示或關掉彈出畫面後, 頁面內容高度和 scroll offset 會改變, 若網頁有針對這些事件作事，要另外處理這裡觸發的「false event」

其它

若要幫彈出畫面設背景是半透明的黑畫面，要用 background + rgba 設秬明度。另一個作法是用 opacity，但是 opacity 會順便影響到子元素，所以用 background 配上 rgba 設值，比較合適。例如:

background: rgba(0, 0, 0, 0.5);