Skip to content

imaoda/no-bounce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

简介

移除 ios 内部 div 滚动到头后无法回滚的问题

ios bug 描述

问题复现步骤:

  1. 内部 div 滚动 (带丝滑滚动属性 -webkit-overflow-scrolling: touch;)
  2. 滚动到头,停 2s 不操作
  3. 继续向下拉扯,扯出顶部的橡皮筋后,立即反向拉扯,此时滚轮失效,而是直接拉的整个页面

使用

import noBounce from 'no-bounce'
// 判断 UA 为 ios 则执行即可
noBounce()

解决原理

  1. 在 body 上绑定触摸事件
  2. touchstart 时,判断 e.target 以及递归其所有父元素,是否存在向上滚动的空间,如果没有,则阻止向上 touchmove 的默认行为

由于只在 touchstart 里递归判断,对性能影响很小

注:在一次 touchstart 到 touchend 的周期中,一开始 preventDefault 后面想恢复也不可以,不能精细到每一次 event

About

修复 ios 下 div 滚动到头立即反向滚动无效的 bug

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published