Mobile的HTML5網頁內快速滾動和回彈的效果

標籤：htm   can   ==   through   效果   body   func   彈性   top   

 style="overflow: auto;-webkit-overflow-scrolling: touch;

這個可以讓頁面在Native端滾動時類比原生的彈性滾動效果

下面是瀏覽器禁止頁面下拉查看網址（不影響頁面內部scroll）

var overscroll = function(el) {  el.addEventListener(‘touchstart‘, function() {    var top = el.scrollTop      , totalScroll = el.scrollHeight      , currentScroll = top + el.offsetHeight;    //If we‘re at the top or the bottom of the containers    //scroll, push up or down one pixel.    //    //this prevents the scroll from "passing through" to    //the body.    if(top === 0) {      el.scrollTop = 1;    } else if(currentScroll === totalScroll) {      el.scrollTop = top - 1;    }  });  el.addEventListener(‘touchmove‘, function(evt) {    //if the content is actually scrollable, i.e. the content is long enough    //that scrolling can occur    if(el.offsetHeight < el.scrollHeight)      evt._isScroller = true;  });}overscroll(document.querySelector(‘.scroll‘));document.body.addEventListener(‘touchmove‘, function(evt) {  //In this case, the default behavior is scrolling the body, which  //would result in an overflow.  Since we don‘t want that, we preventDefault.  if(!evt._isScroller) {    evt.preventDefault();  }});

 

Mobile的HTML5網頁內快速滾動和回彈的效果