微信瀏覽器禁止頁面下拉查看網址（不影響頁面內部scroll）

此類事件是手機touchmove默認事件行為，可以通過js代碼隱藏事件：

$(‘body’).on(‘touchmove’, function (event){ 
    event.preventDefault();
});

document.addEventListener('touchmove', {
    function(e){ e.preventDefault() } }, false);

document.body.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, {passive: false});

當你在網上查找解決微信瀏覽器禁止頁面出現下拉之類的關鍵字的時候，上面這些都是常見的結果。但是，這些東西其實用起來並不能解決問題，它們會把整個頁面所有的滾動事件全部禁止掉，如果你頁面內有某些元素本身就需要scroll的話，那就gg了，它們也被禁止了。

在網上翻了好久，終於找到一個較完美的解決方案了，代碼如下：

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')); document.body.addEventListener('touchmove', function(evt) { if(!evt._isScroller) { evt.preventDefault(); } });

 上面這段代碼是禁止掉頁面scroll，同時允許部分元素上下滑動（需要在該元素上面添加一個class，類名叫scroll【當然也可以改成其他的，需要根據代碼來改就行】），然后就完美解決問題啦！撒花✿✿ヽ(°▽°)ノ✿

 

 

參考文獻：

1.https://github.com/luster-io/prevent-overscroll/blob/master/index.html