var app = document.getElementsByClassName("tree-hole-room-messages")[0]; var touchstartY; app.addEventListener( "touchstart", function(event) { console.log(1); var events = event.touches[0] || event; touchstartY = events.clientY; //獲取觸摸目標在視口中的y坐標 }, false ); app.addEventListener( "touchmove", function(event) { var events = event.touches[0] || event; //注意app.scrollTop始終為0 var scrollTop = app.scrollTop || document.documentElement.scrollTop; //獲取滾動部分的高度 var clientHeight = document.documentElement.clientHeight; //獲取手機屏幕高度(可視部分高度) var scrollHeight = app.scrollHeight; //所有內容的高度 if ( events.clientY > touchstartY && scrollTop === 0 && event.cancelable ) { event.preventDefault(); //禁止到頂下拉 } else if ( scrollTop + clientHeight > scrollHeight && event.cancelable ) { // event.preventDefault(); //禁止到底上拉 } }, false );
代碼實現在tree-hole-room-messages這個滾動區域內下拉不會出現。
且可用滾動這個區域