微信内置浏览器可随意拉伸导致的滚动体验不佳

在项目中遇到过的问题记录一下：

很多情况，我们页面局部可以滚动，但是由于微信浏览器整个页面可以拉伸，导致页面内部的滚动体验不好。所以我们可以把整个页面的滑动事件给禁用掉，然后让页面的某一个区域可以正常的滑动，就可以达到我们理想的效果。
具体实现法案如下：

var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop;
            var totalScroll = el.scrollHeight;
            var 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('.message-box'));// 需要滚动的区域类名：如：.scroll
    var wrap = document.querySelector('.container-fluid');  //页面最外层的类名如：.wrap
    wrap.addEventListener('touchmove', function(evt) {
        if (!evt._isScroller) {
            evt.preventDefault();
        }
    }, { passive: false });

原文地址