在微信網頁開發中，我使用的頁面結構是在body下的container覆蓋全屏，container下有個header和page的容器，page負責顯示所有內容并實現滾動。
結構如圖：
但是遇到了一個問題：在頁面已經滾動到頂部時，繼續往下拖動page容器，會將微信瀏覽器整體往下拖，漏出“該網頁由XXX提供”的提示，然后在安卓下，影響并不大，但是在iphone下，就沒那么簡單了，經過測試，在蘋果下，往下拖動后快速滑動頁面中的page，page并不會滾動，上拖同樣遇到了這個問題，非常影響體驗。
查閱文獻后，我準備在touchstart和touchmove上做些處理。
思路是當page頁面滾動到頂部時，再向下拖動會阻止默認的拖動事件，page頁面到底后也阻止向上拖動。結構與代碼如下
doctype html
html head title 微信拖動測試 meta(charset="utf-8") meta(name="viewport", content="initial-scale=1, maximum-scale=1, minimum-scale=1") link(rel='stylesheet', href='/stylesheets/style.css') script(src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js") body #container .header | header .page .box box1 in page .box box2 in page .box box3 in page .box.bottom box4 in page script. $(function() { var startY, endY; var box_height = $('#container').height(); $('.page').on('touchstart', function(event) { event.stopPropagation(); startY = event.touches[0].pageY; }); $('.page').on('touchmove', function(event) { event.stopPropagation(); var endY = event.changedTouches[0].pageY; var changedY = endY - startY; var scroll_top = $('.page').scrollTop(); // 判斷是否在頂部，且向下拖動 if (scroll_top === 0 && changedY > 0) { event.preventDefault(); } // 判斷是否在底部，且向上拖動 var o = $('.bottom').offset(); if (o.top + o.height === box_height && changedY < 0) { event.preventDefault(); } }); // header禁止拖動 $('.header').on('touchmove', function(event) { event.preventDefault(); }); });樣式如下：
*{ padding: 0; margin: 0;}#container{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #efefef; color: #fff; text-align: center; font-size: 40px;}.header{ position: absolute; left: 0; right: 0; height: 80px; line-height: 80px; background-color: #ddd;}.page{ position: absolute; left: 0; right: 0; bottom: 0; top: 80px; background-color: #ccc; overflow-y: auto; -webkit-overflow-scrolling: touch;}.page > *{ z-index: 1;}.box{ width: 100%; height: 300px; line-height: 300px; box-sizing: border-box; border-bottom: 2px solid #fff;}總結
以上所述是小編給大家介紹的JavaScript中防止微信瀏覽器被整體拖動的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
