IOS溢位不滾動的問題及解決方案

2021-08-19 19:18:56 字數 859 閱讀 2690

最近做的專案在手機端使用的時候踩了個坑,自己埋頭研究了挺久才明白問題的源頭,現在寫出來給大家分享一下

這裡說的坑指的是在ios手機端開啟頁面以後內部控制項的區域性滾動效果無法使用的問題,這個情況也只在ios的手機上會出現,以下:

----------------------------------------我是分割線--------------------------------------------

問題描述:

ios瀏覽器區域性滾動預設沒有彈性滾動的效果。

解決方案:

在需要使用彈性滾動的控制項外層加上乙個div,為這個div加上乙個比較常用的樣式和乙個比較少見的樣式,分別是

overflow-x:scroll;

-webkit-overflow-scrolling: touch;

在我實際的開發專案中,僅僅引用這兩個樣式會有點不夠用,在第一次使用的時候暴露出比較大的問題,主要原因是這個div沒有定義實際的大小,這導致預設的大小來自於子元素的大小撐開,而子元素中其實又很多東西是浮動甚至是做了定位的,這樣在自動計算div大小的時候就會存在很大的誤差導致展示效果很差。

這個問題其實也好解決,只要載入div的時候為這個div計算出它應有的實際寬高然後固定下來就好了,如果這個寬高不好寫有兩種方案解決,一種是依靠百分比,一種是使用js計算以後賦值,我的專案中使用的是後者,各位如有需要可以按照自己的實際情況來進行。

注:在-webkit-overflow-scrolling這個樣式的描述文件裡說這個樣式沒有繼承,但是在我實際的測試中卻是有繼承的效果的,嫌麻煩的可以選擇直接在主頁面(iframe的外層html)的body上賦值這個樣式,在之後的元素中似乎也能繼承上,感興趣的可以自己使用試試~

ios內iframe內容不能滾動的解決方案

在使用iframe或者其他html元素時,你需要使用乙個元素 如div 來包裝他們 1 2 3 1 這個div將作為支援內部滾動的基礎容器。css 要讓iframe支援滾動,需要乙個常用的css屬性和乙個很少人知道的css屬性 property 1 2 3 4 5 6 7 8 scroll webk...

解決socketjs連線不上ios問題

cocos 遊戲打包android 端和網頁端socketjs連線正常 ios 端socketjs不能連線問題 後台spring伺服器 如下 configuration enablewebsocketmessagebroker public class websocketconfig impleme...

ios 中的迴圈引用問題及解決

迴圈引用,指的是多個物件相互引用時,使得引用形成乙個環形,導致外部無法真正是否掉這塊環形記憶體。其實有點類似死鎖。舉個例子 a b c x b 表示強引用,這樣的b的引用計數就是2,假如a被系統釋放了,理論上a會自動減小a所引用的資源,就是b,那麼這時候b的引用計數就變成了1,所有b無法被釋放,然而...