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

《張鑫旭的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把寬度補給容器 - 效果演示

• 自定義滾動條

  • webkit自定義滾動條，詳細解讀

  • 自定義滾動條插件

    • malihu-custom-scrollbar-plugin - 支持IE8+，擴展性極佳
    • antiscroll - cross-browser native OS X Lion scrollbars

• 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與錨點技術

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