當前位置:首頁 » 網頁前端 » 前端設置ios上下不滑動
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端設置ios上下不滑動

發布時間: 2023-03-09 05:01:19

1. vue前端谷歌測試正常,手機端不能滑動怎麼辦(安卓,蘋果都不能滑動)

vue前端谷歌測試正常,手機端不能滑動足兼溶性問題,是兼溶性不好。

2. 前端開發在ios上怎麼不讓頁面向下拖動

原因分析:
ios的webview 內核 設定了其在進行momentum scrolling(彈性滾動)時,會停止所有的 事件響應 及 DOM操作引起的頁面渲染 (親測),故 onscroll 不能實時響應
曾做兼容方案:
使用 ontouchmove 去替代 nscroll ,雖然能更頻繁的觸發事件,但是這邊的項目需求是實時響應滾動事件的同時,還要對頁面元素進行重定位的DOM操作,由上述原因可知,在滾動過程中,頁面會停止一切關於DOM方面的操作,所以若使用 ontouchmove 去實現的話,在按住屏幕進行滑動的時候,屏幕會出現元素抖動的情況(事件觸發與DOM操作間具有幾十毫秒的時間差),兼容失敗
使用 iscroll 的probe版本,該版本能實時探查到滾動的距離,但該鉤子函數是實時去關注 requestAnimationFrame 下的狀態,所以對瀏覽器的版本性能消耗很大,加上 react 的 DOM 操作,安卓機根本動不了,兼容失敗
使用 swiper 插件,在啟動 freeMode 模式時模擬原生的彈性滾動( swiper 模擬原生滾動的方案能兼容較多的安卓機型不出現bug,), 因為 swiper 沒有實時監聽滾動位置的功能,故我監聽滾動開始及結束後的事件,通過 setInterval 及一些計算去實現滾動條的監聽,但因為 react 元素的變化量比較大,導致 swiper 在移動端時對父容器的計算速率達到了一個瓶頸,依舊出現很卡頓的現象,兼容失敗
fallback方案,安卓端使用原生onscroll實現,ios直接載入全部子元素,畢竟ios的性能方面還是比較好的,有更好的方案後續再更.