자 바스 크 립 트,위 챗 브 라 우 저 드 롭 다운 효과 금지

본 논문 의 사례 는 자바 스 크 립 트 가 위 챗 브 라 우 저의 하 회 탄 을 금지 하 는 효 과 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
방법 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'));//          ,    “scroll” class 
  document.body.addEventListener('touchmove', function(evt) { 
    if(!evt._isScroller){ 
      evt.preventDefault(); 
    } 
  }); 
</script>
이 방법의 장단 점:
장점:부분 스크롤 지원;
단점:브 라 우 저 자체 가 페이지 를 초과 하여 나타 나 는 스크롤 이 비활성화 되 었 습 니 다.부분 스크롤 로 바 꾸 고 부분 스크롤 부분 에'scroll'을 추가 해 야 하 는 class 입 니 다.
주:같은 페이지 에 여러 부분 이 굴 러 가면
overscroll(document.querySelector('.scroll');
...로 바꾸다
for(var i=0;ioverscroll(document.querySelectorAll('.scroll')[i]);
}
방법 2:

<script type="text/javascript"> 
  function stopDrop(){ 
    var lastY;//    y    
    $(document.body).on('touchstart', function(event) { 
      lastY = event.originalEvent.changedTouches[0].clientY;//           Y   。 
    }); 
    $(document.body).on('touchmove', function(event) { 
      var y = event.originalEvent.changedTouches[0].clientY; 
      var st = $(this).scrollTop(); //       
      if (y >= lastY && st <= 10) {//         0,        ,       ,  touchmove  。 
        lastY = y; 
        event.preventDefault(); 
      } 
      lastY = y; 
    }); 
  } 
</script> 
이 방법의 장단 점:
장점:브 라 우 저 자체 가 페이지 를 넘 어 서 는 스크롤 을 지원 합 니 다.
단점:부분 스크롤 지원 하지 않 음
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기