在safari上，解決fixed失效問題

一個頁面中有頭部、底部和中間內容區域，底部固定在屏幕底端。

頭部header

內容main

底部footer

 

方法一、在main上使用fixed定位，加上overflow-y屬性。

.main {
    position: fixed;
    top: 50px;
    bottom: 50px;
    overflow-y: scroll;
}

 不推薦這個fixed方案，因為頁面偶爾卡住不動。

 

方法二、中間的main不設定位，高度100%，再padding頭部和尾部，

　　其中頭部和底部的定位設為absolute會比設為fixed體驗更好（況且fix布局在移動端本來就有各種各樣的問題，還是盡量避開:) ）。

  html, body {
   height: 100%;
  }
  main {
      padding: 50px 0;
      height: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
  }

　　ps:webkit-overflow-scrolling:touch偶爾卡住或不能滑動的bug

　　最常見的例子就是：

 

• 在safari上，使用了-webkit-overflow-scrolling:touch之后，頁面偶爾會卡住不動。
• 在safari上，點擊其他區域，再在滾動區域滑動，滾動條無法滾動的bug。
• 通過動態添加內容撐開容器，結果根本不能滑動的bug。

 

 

1） 保證使用了該屬性的元素上沒有設置定位

 

　　如果出現偶爾卡住不動的情況，那么在使用該屬性的元素上不設置定位或者手動設置定位為 position: static

　　這樣會解決部分因為定位(relative、fixed、absolute)導致的頁面偶爾不能滾動的bug。

2）如果添加動態內容頁面不能滾動，讓子元素height+1

 

　　如果在-webkit-overflow-scrolling:touch屬性的元素上，想通過動態添加內容來撐開容器，觸發滾動，是有bug 的，頁面是會卡住不動的。

　　方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上，將height加1%或1px。從而主動觸發scrollbar。

 

main-inner {
    min-height: calc(100% + 1px)
}

 

你也可以直接加偽元素上：

main:after {
    min-height: calc(100% + 1px)
}

文章摘抄自：https://www.cnblogs.com/xiahj/p/8036419.html