Monthly Archives - 三月 2017

網頁在平板或手機的瀏覽器阻止下拉重新整理

雖然現在有Xamarin這種可以用C#寫Native App的方法,但我有一個專案是以網頁來做訂貨單的輸入。

但就會遇到一個問題是,網頁要用瀏覽器開,瀏覽器滑到頂後再往下拉就會重新整理要怎麼辦?

我在Google找到了一段JavaScript,它的原理是在load事件觸發的時候執行增加兩個事件處理函數,那兩個事件一個是判斷是否網站已經到頂,一個是如果到頂將觸控的移動取消。

<script>
window.addEventListener(‘load’, function () {

var isWindowTop = false;
var lastTouchY = 0;

var touchStartHandler = function (e) {
if (e.touches.length !== 1) return;
lastTouchY = e.touches[0].clientY;
isWindowTop = (window.pageYOffset === 0);
};

var touchMoveHandler = function (e) {
var touchY = e.touches[0].clientY;
var touchYmove = touchY – lastTouchY;
lastTouchY = touchY;

if (isWindowTop) {
isWindowTop = false;
if (touchYmove > 0) {
e.preventDefault();
return;
}
}

};

document.addEventListener(‘touchstart’, touchStartHandler, false);
document.addEventListener(‘touchmove’, touchMoveHandler, false);

});
</script>

這個直接放在<Body>裡面就行了。這樣網頁就只能用點重新整理按鈕重整了。