1. 程式人生 > 其它 >【已解決】移動端頁面手勢滑動觸發touch 事件時,在左右上下部分出現空白部分的問題

【已解決】移動端頁面手勢滑動觸發touch 事件時,在左右上下部分出現空白部分的問題

近期在做 epub.js 引擎解析電子書小專案,在閱讀介面通過電子書 rendition 物件的 touch 事件進行手勢翻頁功能時(圖1), 圖1

 

 

滑動頁面出現上下和左右方向上的空白部分以及會有回彈的效果(圖2),

圖2

剛開始感覺還挺好看的但後面越感覺越不對,這樣的使用者體驗個人感覺還不如固定視窗。

解決辦法:在reset.scss 的body html 裡面增加 overflow:hidden;把衝橫軸的滾動條隱藏,就不會出現給回彈效果以及上下左右部分的空白。

另外回彈效果由-webkit-overflow-scrolling:touch;來實現的,它的預設值是auto,即不會有回彈效果,當用戶手指離開螢幕時滾動就立即停止,此時會有’卡頓‘的現象。回彈效果實現的前提是需要由滾動條,如果沒有滾動條的話那就大可不必加 -webkit-ouverflow-scrolling。

這裡有技術大佬的一篇深入IOS 環境下的 -webkit-overflow-scrolling 使用場景的好文 深入研究-webkit-overflow-scrolling:touch及ios滾動 - 夏大師 - 部落格園 (cnblogs.com) ,希望有助大家儘早修改 bug,這裡是技術小白的 bug 專欄,有 bug 咱一起解決!保住髮量就是說……