【已解決】移動端頁面手勢滑動觸發touch 事件時,在左右上下部分出現空白部分的問題
阿新 • • 發佈:2022-04-18
近期在做 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 咱一起解決!保住髮量就是說……