-webkit-overflow-scrolling: touch; ios rubber band effect card screen, scroll penetration - Resolved

-webkit-overflow-scrolling property

MDN summarized into the following

-webkit-overflow-scrolling properties of control elements on the mobile device is to use the scroll spring back effect.

Value Options

1, auto
use ordinary rolling, when the finger is removed from the touch screen, scrolling will immediately stop
2, touch
using the scroll has a rebound effect when the finger is removed from the touch screen, content will continue scrolling effect for some time. Continue scrolling speed is proportional to the duration and intensity of scrolling and gesture. But also create a new stack context.

BUG problem

1, using -webkit-overflow-scrolling: after touch, occasionally jammed page does not move.

Re-live the King : Discovery page is jammed problem does not occur during rolling, but problems will emerge in the scroll bar to the top or bottom when the
analysis of the problem : top / bottom if it does not arrive in time to reach the top / bottom , you can avoid this problem is not
a solution : add slide when a sliding area scroll事件monitor whether the scroll bar to the bottom / top if the top / bottom then make scrollTop^a corresponding reduction 1;
code is as follows:

// 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 was used -webkit-overflow-scrolling: After the touch, cause pop sliding base (scrolling through).
Re-live the King : popups with slide scrolling content in the end or the top part of the underlying triggers rolling;
analysis of the problem : scroll events penetration,
solution : when scrolling display pop record fixed at the bottom and the bottom scrollTop value, and bottom content set position: fixed;
height: 100%; to achieve the purpose of fixing the bottom, then can avoid the rolling penetrate;
code as follows:

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

// 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;
	}
}

Reference document: scroll penetration solution to the problem

---

1. Bottom = scrollHeight- the offsetHeight scrollTop
   the offsetHeight : element comprises a horizontal border, padding, and the scroll bar elements (if it exists and rendering) is not included: height after other pseudo-earth elements: before or.
   the scrollHeight : minimum filling value clientHeight view all elements required for the same content. Including padding elements, but does not include the border and margin elements. scrollHeight :: before and also includes such a pseudo-element :: after. ↩︎