1. 首先给需要滑动的元素加一个 touchmove 事件, 事件触发的时候给 event 设置一个属性 isSCROLL 为 true;
2. 然后给 body 加 touchmove 事件, 触发事件时判断 event 的 isSCROLL 属性是否为 true, 否的话就禁止默认事件
3. 是的话代表点击的事件源为需要滑动的元素, 判断其滑动的最高点和最低点加一个限制就 ok 了, 类似碰壁反弹 (手动改变 scrollTop 会导致页面有闪动现象)
- function handleScroll () {
- var iOS = navigator.userAgent.indexOf('iPhone');
- // 判断是否为 iOS
- if (iOS !== -1) {
- // iOS 下运行
- var divEl = document.querySelector('.home-container-con');
- // 你需要滑动的 dom 元素
- iosTrouchFn(divEl);
- }
- function iosTrouchFn(el) {
- // el 需要滑动的元素
- el.addEventListener('touchmove', function (e) {
- if (el.offsetHeight < el.scrollHeight) {
- e.isSCROLL = true;
- }
- });
- document.body.addEventListener('touchmove', function (e) {
- if (!e.isSCROLL) {
- e.preventDefault(); // 阻止默认事件 (上下滑动)
- }
- else {
- // 需要滑动的区域
- var top = el.scrollTop;
- // 对象最顶端和窗口最顶端之间的距离
- var scrollH = el.scrollHeight;
- // 含滚动内容的元素大小
- var offsetH = el.offsetHeight; // 元素网页可见区域高
- var cScroll = top + offsetH; // 当前滚动的距离
- // 被滑动到最上方和最下方的时候
- if (top === 0) {// 滑动到了顶部
- top = 1; // 0~1 之间的小数会被当成 0
- }
- else if (cScroll === scrollH) {
- // 滑动到了底部
- el.scrollTop = top - 1;
- }
- }
- }, {
- passive: false
- }); // passive 防止阻止默认事件不生效
- }
- }
[参考链接](https://blog.csdn.net/qianhong_/article/details/52426014?utm_source=blogxgwz2)
[参考链接](https://blog.csdn.net/qq_40717869/article/details/81749970)
来源: https://juejin.im/post/5c6d1a94e51d454e6b542b1e