JavaScript禁止微信瀏覽器下拉回彈效果
本文實(shí)例為大家分享了JavaScript禁止微信瀏覽器下拉回彈的效果,供大家參考,具體內(nèi)容如下
方法1:
<script type="text/javascript">
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('.scroll'));//哪里需要可以局部滾動(dòng),添加一個(gè)“scroll”的class
document.body.addEventListener('touchmove', function(evt) {
if(!evt._isScroller){
evt.preventDefault();
}
});
</script>
此方法的優(yōu)缺點(diǎn):
優(yōu)點(diǎn):支持局部滾動(dòng);
缺點(diǎn):瀏覽器本身超出頁(yè)面出現(xiàn)的滾動(dòng)被禁用掉了,需要改為局部滾動(dòng),且局部滾動(dòng)的地方需要加“scroll”的class。
注:如果同一個(gè)頁(yè)面多個(gè)局部滾動(dòng),需要將
overscroll(document.querySelector('.scroll');
改為
for(var i=0;i<document.querySelectorAll('.scroll').length;i++){
overscroll(document.querySelectorAll('.scroll')[i]);
}
方法2:
<script type="text/javascript">
function stopDrop(){
var lastY;//最后一次y坐標(biāo)點(diǎn)
$(document.body).on('touchstart', function(event) {
lastY = event.originalEvent.changedTouches[0].clientY;//點(diǎn)擊屏幕時(shí)記錄最后一次Y度坐標(biāo)。
});
$(document.body).on('touchmove', function(event) {
var y = event.originalEvent.changedTouches[0].clientY;
var st = $(this).scrollTop(); //滾動(dòng)條高度
if (y >= lastY && st <= 10) {//如果滾動(dòng)條高度小于0,可以理解為到頂了,且是下拉情況下,阻止touchmove事件。
lastY = y;
event.preventDefault();
}
lastY = y;
});
}
</script>
此方法的優(yōu)缺點(diǎn):
優(yōu)點(diǎn):支持瀏覽器本身超出頁(yè)面的滾動(dòng)
缺點(diǎn):不支持局部滾動(dòng)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
從jQuery.camelCase()學(xué)習(xí)string.replace() 函數(shù)學(xué)習(xí)
camelCase函數(shù)的功能就是將形如background-color轉(zhuǎn)化為駝峰表示法:backgroundColor。2011-09-09
微信小程序?qū)崙?zhàn)之登錄頁(yè)面制作(5)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之登錄頁(yè)面制作代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
仿iPhone通訊錄制作小程序自定義選擇組件的實(shí)現(xiàn)
這篇文章主要介紹了仿iPhone通訊錄制作小程序自定義選擇組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
正則表達(dá)式在js前端的15個(gè)使用場(chǎng)景梳理總結(jié)
本篇帶來(lái)15個(gè)正則使用場(chǎng)景,按需索取,收藏恒等于學(xué)會(huì)!!有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
Javascript封裝id、class與元素選擇器方法示例
這篇文章主要給大家介紹了Javascript封裝id、class與元素選擇器的方法,文中給出了詳細(xì)的示例代碼,對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-03-03
JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法,可實(shí)現(xiàn)根據(jù)鼠標(biāo)事件動(dòng)態(tài)改變input與textarea樣式的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
詳解JavaScript的變量和數(shù)據(jù)類(lèi)型
這篇文章主要介紹了詳解JavaScript的變量和數(shù)據(jù)類(lèi)型,需要的朋友可以參考下2015-11-11

