>  기사  >  웹 프론트엔드  >  JavaScript는 WeChat 브라우저의 풀다운 리바운드 효과를 비활성화하는 기능을 구현합니다.

JavaScript는 WeChat 브라우저의 풀다운 리바운드 효과를 비활성화하는 기능을 구현합니다.

韦小宝
韦小宝원래의
2018-03-07 18:01:313481검색

이 글은 주로 자세히 소개합니다JavaScriptWeChat 브라우저에서 풀다운 리바운드 효과를 비활성화하는 방법 JavaScript를 배우는 데 필요한 특정 참고 자료와 가치가 있습니다. JavaScript에 관심이 있는 친구는 이 글을 참조할 수 있습니다.

이 글은 참고를 위해 WeChat 브라우저에서 풀다운 리바운드를 금지하는 JavaScript의 효과를 공유합니다. 구체적인 내용은 다음과 같습니다

방법 1:

<script type="text/javascript"> 
  var overscroll = function(el){ 
    el.addEventListener(&#39;touchstart&#39;, 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(&#39;touchmove&#39;, function(evt){ 
      if(el.offsetHeight < el.scrollHeight){ 
        evt._isScroller = true; 
      } 
    }); 
  } 
  overscroll(document.querySelector(&#39;.scroll&#39;));//哪里需要可以局部滚动,添加一个“scroll”的class 
  document.body.addEventListener(&#39;touchmove&#39;, function(evt) { 
    if(!evt._isScroller){ 
      evt.preventDefault(); 
    } 
  }); 
</script>

이 방법의 장점과 단점:
장점 : 로컬 스크롤 지원
단점: 브라우저 자체가 페이지 너머의 스크롤을 비활성화했습니다. 부분 스크롤로 변경해야 하며 로컬 스크롤 위치에 "스크롤" 클래스를 추가해야 합니다.
참고: 동일한 페이지에 부분 스크롤이 여러 개 있는 경우

overscroll(document.querySelector(&#39;.scroll&#39;);


for(var i=0;i<document.querySelectorAll(&#39;.scroll&#39;).length;i++){
overscroll(document.querySelectorAll(&#39;.scroll&#39;)[i]);
}

방법 2:

<script type="text/javascript"> 
  function stopDrop(){ 
    var lastY;//最后一次y坐标点 
    $(document.body).on(&#39;touchstart&#39;, function(event) { 
      lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。 
    }); 
    $(document.body).on(&#39;touchmove&#39;, 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>
로 변경해야 합니다.

이것의 장점과 단점 방법:
장점: 페이지 외부에서 브라우저 자체의 스크롤을 지원합니다
단점: 부분 스크롤을 지원하지 않습니다

위 내용은 JavaScript는 WeChat 브라우저의 풀다운 리바운드 효과를 비활성화하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.