描述
-webkit-overflow-scrolling: touch; 的父元素中子元素超过父元素大小无法滚动。
方法一
- iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理
- 深入研究-webkit-overflow-scrolling:touch及ios滚动
- -webkit-overflow-scrolling:属性
以上方法解决了大部分网友的问题，但是没有解决我的问题。
方法二
我用了vue-router，而且部分组件使用了keep-alive，只有从keep-alive的页面跳转到会有bug的页面，才会触发这个bug，而且刷新页面的话bug就消失了。
最后用js的方式解决了问题，但是滑动没那么顺畅了。原始代码来自网络做了部分修改，侵删（实在找不到原始网页了）。
function need2fix() {
let result = false
try {
// uaParser 是模块ua-parser-js
const uaOs = uaParser(navigator.userAgent).os
const version = Number(uaOs.version.split('.')[0])
if (uaOs.name === 'iOS' && version < 12) {
result = true
}
} catch (ex) {
console.error('app: ', ex)
result = true
}
return result
}
function touchScroll(id) {
if (need2fix()) {
console.warn('app: 适配safair，解决不能滑动的问题')
let scrollStartPos = 0
document.getElementById(id).addEventListener('touchstart', function(event) {
scrollStartPos = this.scrollTop + event.touches[0].pageY
// event.preventDefault()
}, false)
document.getElementById(id).addEventListener('touchmove', function(event) {
this.scrollTop = scrollStartPos - event.touches[0].pageY
// event.preventDefault()
}, false)
}
}
// warpperId 是使用了-webkit-overflow-scrolling: touch;的元素id
touchScroll('warpperId')
