位置: IT常识 - 正文
【已解决】移动端页面手势滑动触发touch 事件时，在左右上下部分出现空白部分的问题(我想问一下移动)
编辑：rootadmin近期在做 epub.js 引擎解析电子书小项目，在阅读界面通过电子书 rendition 对象的 touch 事件进行手势翻页功能时（图1）， 图1 滑动页面出现上下和左右方向上的空白部分以及会有回弹的效果（图2）， 图2 刚开始感觉还挺好看的但后面越感觉越不对，这样的用户体验个人感觉还不如固定窗口 ... 近期在做 epub.js 引擎解析电子书小项目，在阅读界面通过电子书 rendition 对象的 touch 事件进行手势翻页功能时（图1），图1
本文链接地址:https://www.jiuchutong.com/zhishi/313051.html
转载请保留说明！
推荐整理分享【已解决】移动端页面手势滑动触发touch 事件时，在左右上下部分出现空白部分的问题(我想问一下移动)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:移动ⅴlp,移动ⅴolte,移动wⅰfⅰ,移动ⅴlp,移动xz,移动ⅴlp,移动αpp,移动wⅰfⅰ,内容如对您有帮助，希望把文章链接给更多的朋友！
滑动页面出现上下和左右方向上的空白部分以及会有回弹的效果（图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 咱一起解决！保住发量就是说……
上一篇：dedecms织梦调用日期格式化形式大全(织梦怎么调用当前栏目下的文章)
下一篇：不借助 Javascript，利用 SVG 快速构建马赛克效果(不借助的英文)
