移動端 position:fixed; 定位在iOS系統上失效,該怎麼解決
今天公司運營人員在蘋果手機上瀏覽頁面時發現一個bug,就是根據瀏覽器視窗position:fixed; 定位在底部的元素,會隨著螢幕的滾動而滾動,在iOS系統上失效,隨後讓我改。自己在網上搜了一些解決辦法,最終覺得以下辦法相對簡單。如果有更簡單的辦法,歡迎各位大神互相交流,解決辦法如下:
html我就不寫了,有興趣的可以看看我修改的專案點選開啟連結
把需要用手滑動的內容用clss為.content(名字隨便起)的div包起來,樣式程式碼如下:
.content { position: fixed; top: 0; left: 0; bottom: 180px; /*距離底部的距離為底部盒子的高度,自己也可以設定*/ overflow-y: scroll; width: 100%; height: auto; -webkit-overflow-scrolling: touch; /*這句是為了滑動更順暢*/ }
-webkit-overflow-scrolling: touch; /*這句是為了滑動更順暢*/
這句程式碼一定得寫,要不上下滑動起來有些卡頓,親自體驗過的。
然後把需要固定在底部的內容用class為.footer(名字隨便起)的div包起來,樣式程式碼如下:
.footer {
position: fixed;
bottom: 0;
height: 180px;
}
這樣,在真機上再次測試就沒有問題了。如有更好的解決辦法,希望大家互相交流。