1.IOS滚动不平滑的问题
- 在移动端特别是iOS中,当滚动屏幕时会发现手指一拿开滚动就停止,这种用户体验效果很不好,有种给用户滚动卡顿的感觉。CSS3中的-webkit-overflow-scrolling属性可以完美的解决这个问题,该属性可控制元素在移动设备上是否使用滚动回弹效果
auto:使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
-webkit-overflow-scrolling:auto
touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
-webkit-overflow-scrolling:touch
2.安卓输入框被键盘挡住问题
部分安卓机中输入框被被键盘遮挡住,以下这种解决办法,可以解决绝大数安卓机上面的问题
if(/Android/.test(navigator.appVersion)) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
document.activeElement.scrollIntoView();
}
})
}
3.移动端click点击清除300ms延迟
import FastClick from 'fastclick'
window.addEventListener('load', () => {
FastClick.attach(document.body)
})