如若初见
0%

webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏，滚动穿透 --已解决

发表于

-webkit-overflow-scrolling 属性

MDN中概述 入下

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

值选项

1、auto
使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止
2、touch
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

问题 BUG

1、使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。

复现场景：发现页面在滚动期间是不会出现卡住的问题，但是在滚动条到顶部或者底部的时候会出现这个问题
分析问题：如果在到达顶部/底部的时候不让它到达顶部/底部,是不是可以规避这个问题
解决办法: 在滑动的时候为滑动区域添加 scroll事件监听滚动条是否到了底部/顶部 如果到了顶部/底部那么让scrollTop[^1]相应的减少 1；
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// js 文件

// 获取滚动区域
let el = document.getElementById('scrollSectionArea')
// 获取滚动内容的高度 如果是在是vue 使用动态的获取高度请将获取元素替换为 ref 来获取,不然是获取不到高度的 在监听函数内部注意this指向
let scrollHeight =  document.getElementById('scrollSection').scrollHeight;

el.addEventListener('scroll', function() {
// 如果滚动条到顶部/底部则scrollTop值相应的减 1
	if (el.scrollTop <= 1) {
	  el.scrollTop = 1;
	}
	if ((el.scrollTop + el.offsetHeight) >= (scrollHeight - 1)) {
	  el.scrollTop = scrollHeight - el.offsetHeight - 1;
	}
});

2、使用了-webkit-overflow-scrolling:touch之后，弹窗会引发底部滑动（滚动穿透）。
复现场景：弹窗带有滚动内容 滑动到底部或者顶部会触发底层的滚动；
分析问题：滚动事件穿透，
解决办法: 弹窗显示的时候固定底部滚动并记录底层scrollTop值，并将底部内容设置为position: fixed;
height: 100%; 来达到固定底层的目的，然后就可以规避滚动穿透；
代码如下：

1
2
3
4
5
6
 // css
 /* 解决点击穿透滑动失效 */
.mask_show {
  position: fixed;
  height: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// js部分
data:{
	return {
	...
		eventScrollTop: 0
	...
	}
}

methods:{
	// 弹窗显示的时候调用 记录底部滚动条位置
	setScrollTopValue() {
		this.eventScrollTop = document.scrollingElement.scrollTop ||
		                document.documentElement.scrollTop ||
		                document.body.scrollTop;
		document.body.classList.add('mask_show ');
		document.body.style.top = -this.eventScrollTop + 'px';
	},
	// 弹窗关闭的时候调用 回归到原来滚动条位置
	useScrollTopValue() {
	    document.body.classList.remove('mask_show');
	    document.scrollingElement.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = this.eventScrollTop;
	}
}

[^1]: 底部 scrollTop = scrollHeight- offsetHeight
offsetHeight：包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
scrollHeight：值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

参考文档：滚动穿透问题的解决方案

------ 本文结束------