完美解決safari、微信瀏覽器下拉回彈效果。

muddyway 發(fā)布于2019-08-29 11:30 / 3708人閱讀

摘要：完美解決微信瀏覽器下拉回彈效果，只保留局部回彈效果。代碼代碼代碼

完美解決safari、微信瀏覽器下拉回彈效果，只保留局部回彈效果。

CSS代碼

.box{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

HTML代碼

JS代碼

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();
    }
});

云服務(wù)器 GPU云服務(wù)器回彈效果 safari擴(kuò)展瀏覽器 php下拉加載效果 html下拉刷新效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111696.html

相關(guān)文章

完美解決safari、微信瀏覽器下拉回彈效果。

摘要：完美解決微信瀏覽器下拉回彈效果，只保留局部回彈效果。代碼代碼代碼完美解決safari、微信瀏覽器下拉回彈效果，只保留局部回彈效果。 CSS代碼 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代碼 JS代碼 var overscroll = fu...

tainzhi 2019-08-22 10:42 評(píng)論0 收藏0
完美解決safari、微信瀏覽器下拉回彈效果。

摘要：完美解決微信瀏覽器下拉回彈效果，只保留局部回彈效果。代碼代碼代碼完美解決safari、微信瀏覽器下拉回彈效果，只保留局部回彈效果。 CSS代碼 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代碼 JS代碼 var overscroll = fu...

melody_lql 2019-08-01 15:53 評(píng)論0 收藏0
深入探究iOS下fixed定位導(dǎo)致的問(wèn)題

摘要：討論背景眾所周知，元素在下的表現(xiàn)是糟糕的，元素在滾動(dòng)頁(yè)面中使用會(huì)出現(xiàn)各種奇怪的問(wèn)題，在微信瀏覽器中使用就更甚如頁(yè)面滾動(dòng)，元素與頁(yè)面相互分離頁(yè)面滾動(dòng)，元素消失等。說(shuō)明原生漸變顏色終止會(huì)覆蓋微信重設(shè)顏色的機(jī)制。討論背景眾所周知，fixed元素在IOS下的表現(xiàn)是糟糕的，fixed元素在滾動(dòng)頁(yè)面中使用會(huì)出現(xiàn)各種奇怪的問(wèn)題，在微信瀏覽器中使用就更甚（如：頁(yè)面滾動(dòng)，fixed元素與頁(yè)面相互分離...

tulayang 2019-08-02 15:57 評(píng)論0 收藏0
深入探究iOS下fixed定位導(dǎo)致的問(wèn)題

摘要：討論背景眾所周知，元素在下的表現(xiàn)是糟糕的，元素在滾動(dòng)頁(yè)面中使用會(huì)出現(xiàn)各種奇怪的問(wèn)題，在微信瀏覽器中使用就更甚如頁(yè)面滾動(dòng)，元素與頁(yè)面相互分離頁(yè)面滾動(dòng)，元素消失等。說(shuō)明原生漸變顏色終止會(huì)覆蓋微信重設(shè)顏色的機(jī)制。討論背景眾所周知，fixed元素在IOS下的表現(xiàn)是糟糕的，fixed元素在滾動(dòng)頁(yè)面中使用會(huì)出現(xiàn)各種奇怪的問(wèn)題，在微信瀏覽器中使用就更甚（如：頁(yè)面滾動(dòng)，fixed元素與頁(yè)面相互分離...

toddmark 2019-08-29 13:06 評(píng)論0 收藏0
微信里面防止下拉"露底"組件

摘要：從本人這兩個(gè)月移動(dòng)實(shí)踐的經(jīng)驗(yàn)來(lái)看，微信的里面和的滑動(dòng)效果無(wú)論是在安卓還是下的體驗(yàn)都很一般，有明顯的卡頓現(xiàn)象，在安卓下面還會(huì)出現(xiàn)滑動(dòng)過(guò)快的時(shí)候在頁(yè)面停下來(lái)之后滾動(dòng)條才閃到相應(yīng)位置的現(xiàn)象。前言在微信里面瀏覽頁(yè)面的時(shí)候，有一個(gè)很管用的方法可以區(qū)分這個(gè)頁(yè)面是原生的還是H5形式的。隨便打開(kāi)一個(gè)頁(yè)面，用力往下扯的時(shí)候，如果頁(yè)面上方出現(xiàn)了黑底，黑底上有一行諸如網(wǎng)頁(yè)由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 評(píng)論0 收藏0