移動端 監聽滾動事件 且 監聽慣性

  var timer = null;
var timer1 = null;
window.addEventListener('touchstart',function(e){
  var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
  var containerH = $('img').height(); // 圖片的高度
  if (scrollTop>=0 && scrollTop < containerH) {
    var bag = scrollTop / containerH;
    $('header').css('background','rgba(0,173,176,'+ bag +')');
  }
},false);

window.addEventListener('touchmove',function(e){
  clearInterval(timer1);
  var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
  var containerH = $('img').height(); // 圖片的高度
  if (scrollTop>=0 && scrollTop < containerH) {
    var bag = scrollTop / containerH;
    $('header').css('background','rgba(0,173,176,'+ bag +')');
  }
},false);

window.addEventListener('touchend',function(e){
  clearTimeout(timer);
  timer = setTimeout(function() {
    var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
    var containerH = $('img').height(); // 圖片的高度
    if (scrollTop>=0 && scrollTop < containerH) {
      var bag = scrollTop / containerH;
      $('header').css('background','rgba(0,173,176,'+ bag +')');
    }
    if (scrollTop < 200) {
      timer1 = setInterval(function() {
        if (scrollTop < 0) {
          $('header').css('background','rgba(0,173,176,'+ 0 +')');
          clearInterval(timer1);
          return;
        }
        scrollTop -= 200;
        console.log(scrollTop);
        document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
      }, 100)
    }
  }, 100)
},true);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章