【學習筆記】CSS深入理解之overflow

程然然然然然發表於2018-12-10
筆記CSS

《張鑫旭的CSS深入理解之overflow》學習筆記

overflow基本屬性

overflow屬性介紹

overflow: visible(預設)|hidden|scroll|auto|inherit

當overflow-x 與 overflow-y值相同時，等同於overflow

當overflow-x 與 overflow-y值不相同時，其中一個值被賦予hidden|auto|scroll時，若另一個值為visible，
那這個visvible會被重置為auto

https://codepen.io/curlywater…

overflow作用前提

元素非 display: inline
對應方位的尺寸限制: width/height/max-width/max-height/absolute拉伸
對於單元格等, 需要 table 為 table-layout: fixed 狀態才可以

overflow與滾動條

  • 頁面預設滾動條來自html（與body無關），因此若要去除預設滾動條，只需要

    html {
    overflow: hidden;
}

  • 獲取滾動高度

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
/* chrome瀏覽器：document.body.scrollTop */
/* 其他瀏覽器：document.documentElement.scrollTop*/
  • 內部padding-bottom缺失

    除Chrome之外的其他瀏覽器會有padding-bottom缺失效果，將導致scrollHeight值不一致

  • 滾動條寬度機制

    1. 滾動條會佔用容器的可用寬度|高度
    2. 計算滾動條寬度：containerWidth – boxWidth
    3. 因寬度佔用，overflow: auto可能會造成容器內部區域性混亂，因此容器內部需使用自適應佈局

    4. 水平居中跳動問題，容器定寬居中時，當視口高度變化導致滾動條出現將導致容器跳動。

      解決方法：

      1. 針對IE9以下瀏覽器，強制設定html滾動
      2. 其他瀏覽器，利用calc函式計算滾動條寬度（瀏覽器寬度 – 可用內容區寬度），通過padding把寬度補給容器 – 效果演示

  • 自定義滾動條

  • iOS原生滾動回撥

    -webkit-overflow-scrolling: touch;

overflow與BFC

overflow: visible不會產生BFC

overflow: hidden|scroll|auto 產生BFC，但是具有溢位不可見的副作用

overflow與絕對定位

overflow失效：絕對定位元素不總是被overflow元素剪裁/隨滾動條滾動，尤其當overflow元素處於絕對定位元素和其包含塊中間時

避免失效的方法：

  1. overflow元素自身為包含塊
  2. overflow元素的子元素為包含塊
  3. overflow元素的子元素有transform宣告

依賴overflow的樣式表現

  1. 在overflow為visible時，resize屬性將會失效
  2. text-overflow: ellipsis以overflow: hidden為前提

overflow與錨點技術

錨點技術的實質時容器改變滾動高度

相關文章