이 글은 주로 자세히 소개합니다JavaScriptWeChat 브라우저에서 풀다운 리바운드 효과를 비활성화하는 방법 JavaScript를 배우는 데 필요한 특정 참고 자료와 가치가 있습니다. JavaScript에 관심이 있는 친구는 이 글을 참조할 수 있습니다.
이 글은 참고를 위해 WeChat 브라우저에서 풀다운 리바운드를 금지하는 JavaScript의 효과를 공유합니다. 구체적인 내용은 다음과 같습니다
방법 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>
이 방법의 장점과 단점:
장점 : 로컬 스크롤 지원
단점: 브라우저 자체가 페이지 너머의 스크롤을 비활성화했습니다. 부분 스크롤로 변경해야 하며 로컬 스크롤 위치에 "스크롤" 클래스를 추가해야 합니다.
참고: 동일한 페이지에 부분 스크롤이 여러 개 있는 경우
overscroll(document.querySelector('.scroll');
을
for(var i=0;i<document.querySelectorAll('.scroll').length;i++){ overscroll(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>
이것의 장점과 단점 방법:
장점: 페이지 외부에서 브라우저 자체의 스크롤을 지원합니다
단점: 부분 스크롤을 지원하지 않습니다
위 내용은 JavaScript는 WeChat 브라우저의 풀다운 리바운드 효과를 비활성화하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!