禁止手机浏览器与微信浏览器的原生滚动

Posted on In

在微信浏览器中,如果页面内容到头或者到底,手指滑动时会拖动整个页面。如图所示

upload successful

在原生滑动过程中,页面中的所有动画(包括canvas动画、gif动图、css变幻、js计时器)会全部停止,在页面回弹到初始位置时才会继续运行,极大地影响了用户的体验。

因此,在用户有拖动操作时需要将页面的上下原生滑动停止,至少要在用户拖动区域禁止原生滚动事件。

例如我在项目中碰到需要用户左右滑动的操作,而如果用户向左下滑动,则会造成页面先向下滑动后回弹,然后定义的事件才会产生。

因此需要使用preventDefault()来禁止原生touchstart动作。但是如果直接使用event.preventDefault()会使整个页面的滚动事件全部失效,达不到想要的效果,因此对其进行有条件的处理。js代码如下: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
* 
* 禁止微信原生上下滚动
*/
var overscroll = function(el) {
	el.addEventListener('touchstart', function() {
	    var top = el.scrollTop,
		totalScroll = el.scrollHeight,
		currentScroll = top + el.offsetHeight;
	    if (top === 0) {
    	el.scrollTop = 1;
        } else if (currentScroll === totalScroll) {
	        el.scrollTop = top - 1;
        }
        });
    el.addEventListener('touchmove', function(evt) {
    if (el.offsetHeight < el.scrollHeight)
      evt._isScroller = true;
   });
}
overscroll(document.querySelector('#scroll'));//此处的scroll为需要禁止原生滚动的Object
document.body.addEventListener('touchmove', function(evt) {
    if (!evt._isScroller) {
    evt.preventDefault();
    }
});