近期在做 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 咱一起解決！保住發量就是說……
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458558.html
標籤：Html/Css
上一篇：用css制作旋轉的立方體