IOS移动端 -webkit-overflow-scrollin属性造成的问题

-webkit-overflow-scrolling带来的相关问题。

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

其具有两个属性：

auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

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

在查找相关资料时，有看见这样一个问题，虽然在开发过程中并没有遇见，但防患未然还是做一个记录。

如果在-webkit-overflow-scrolling:touch属性的元素上，想通过动态添加内容来撑开容器，触发滚动，页面会卡住不动。（测试中未复现此bug）。

给出的解决方案：给内容最小高度101%；主动触发scrollbar。

你也可以直接加伪元素上

滚动的盒子:after { min-height: calc(100% + 1px)}

OS回弹现象产生的问题

滚动元素的滚动条在顶部时做下拉操作，或滚动条在底部时做上滑操作时，引发窗口反弹。此时滚动元素的滚动事件暂时失效。

解决方案可引用inobounce.js，其原理为：

判断当前浏览器是否支持-webkit-overflow-scrolling:touch属性。

若存在，监听touchstart和touchmove事件

window.addEventListener('touchstart ',handleTouchstart, { passive : false });
window.addEventListener('touchmove',handleTouchmove,{ passive : false });

在touchstart中获取触摸点的y(startY)坐标

在touchmove中通过循环查找，如果当前事件源的祖先元素具有-webkit-overflow-scrolling:touch属性，且完全计算属性overflow-yauto或者overflow-yscroll 则进一步做判断，否则阻止默认事件。

var handleTouchmove = function(evt)
var el = evt.target; //获取当前事件源
var zoom = window.innerWidth / window.document.documentElement.clientWidth;
if (evt.touches.length > 1 || zoom !== 1) {
return;
}
//检查是否存在可滚动的祖先元素
while (el !== document.body && el !== document) {
//获取样式属性
var style = window.getComputedStyle(el);
if (!style) { // 如果遇到无法计算样式的元素，请退出
break;
}
//忽略input元素
if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
return;
}
var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');
var overflowY = style.getPropertyValue('overflow-y');
var height = parseInt(style.getPropertyValue('height'), 10);
var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');
var canScroll = el.scrollHeight > el.offsetHeight;
// 如果检查的元素具有回弹属性，且可滚动。
if (isScrollable && canScroll) {
//获取当前触摸点的y( curY )坐标
var curY = evt.touches ? evt.touches[0].screenY : evt.screenY;
//滚动条位于顶部，且用户进行下拉操作
var isAtTop = (startY <= curY && el.scrollTop === 0);
//滚动条位于底部，且用户进行上滑操作，此时窗口也会反弹
var isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height);
// 这两种情况下窗口会都会反弹，为避免这种现象，此时阻止默认事件
if (isAtTop || isAtBottom) {
evt.preventDefault();
}
return;
}
// 测试元素不具有回弹属性，且不可滚动，继续测试其父元素
el = el.parentNode;
}
// 祖先元素都不具有回弹属性，且不可滚动，则阻止默认事件
evt.preventDefault();
};

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

以上方式虽然可解决当滚动条到达底部或顶部时，窗口整体下移或上移，导致内部滚动事件暂时性失效问题

不过也使得滚动容器自身回弹效果的部分丢失。

可改进的一个想法的记录：

 在touchstart事件中判断祖先元素是否具有回弹属性。且当滚动条在顶部或底部时对应的将滚动条的位置置为1或底部滚动最大距离-1。

阻止其他自身或祖先元素不具有滚动条的元素的默认事件。

在做测试时发现在非轻触时是可以实现的，但是触摸事件急促短暂时，窗口依旧整体下移。

移动端唤起软键盘引起的问题

当input框聚焦时，移动端唤起软键盘，页面整体太高，当软键盘消失后，如果input框的祖先元素是固定定位，则元素视觉上回到之前的位置，但实际上窗口的滚动条为负，页面出现错位现象，如果祖先元素是绝对定位，元素会停留在软键盘存在时的位置，需手动滑动页面恢复原状。

解决方法：中心思想是在失焦事件时设置window.scroll(0,0)。

但是，当页面内存在两个以上的输入框时，在输入框切换之间，会存在聚焦失焦聚焦事件，如果未做判断，此时会出现输入框切换间页面上下抖动。

解决方式:在失焦事件中设置定时器，定时器内部设置window.scroll(0,0)在聚焦事件中清除定时器。即保证了在软键盘存在时不触发window.scroll(0,0)。