npm插件ios-scroll-supply
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防止阻止默认事件不生效
}
}
问题图例: