모바일 브라우저 상단에서 아래로 당겨서 새로 고침하는 문제를 해결하는 방법

아래 에디터가 웹페이지 소스 문제나 모바일 브라우저 상단 스크롤 시 새로고침 문제를 완벽하게 해결한 글을 공유해 드릴 예정인데 참고할만한 가치가 있어 모든 분들께 도움이 되었으면 좋겠습니다. 문제는 아래와 같습니다.

일반적으로 이러한 문제를 처리하는 속성에는 "event.preventDefault()"가 있지만 직접 사용하면 페이지 내부 스크롤도 실패하고 스크롤할 수 없습니다. 처리하는 방법도 비슷합니다.

슬라이딩 영역은 특정 방향으로 이동하기 때문에 슬라이딩 블록 상단에서 브라우저 상단까지의 최대 거리는 0입니다(나머지는 음수 값 ​​[$('#bodycthead').offset(). top]) 0 일 때 위로 돌아왔다는 의미로 계속해서 아래로 당겨도 아무런 반응이 없어야 하며, 위로 끌어당길 때에는 기본 슬라이딩을 취소해야 합니다. 따라서 "event.preventDefault()"는 함수로 캡슐화되어야 합니다.

위로 슬라이드할지 아래로 슬라이드할지 결정하고, 화면을 터치할 때 Y 값을 기록하고(scroll_start = e.changedTouches[0].clientY;), 이동할 때 Y 값을 생성하기만 하면 됩니다(e.changedTouches [0].clientY), 두 값(e.changedTouches[0].clientY-scroll_start)의 차이가 양수이면 아래로 미끄러진다는 의미, 음수이면 아래로 내려간다는 뜻입니다. 위로 미끄러지듯.

이벤트 모니터링 추가:

var scroll_start=0;//定义滑动时的起点
function handler(){//禁止默认滑动函数
 event.preventDefault();
}
document.addEventListener("touchstart",function(e){
 scroll_start = e.changedTouches[0].clientY;//设置起点为触摸时的点
 if($('#bodycthead').offset().top==0){//如果触摸时是滑动块在顶部则禁用默认滑动
  document.addEventListener('touchmove', handler, false);
 }
});
document.addEventListener("touchmove",function(e){
 $("title").html(e.changedTouches[0].clientY-scroll_start);
 if($('#bodycthead').offset().top==0){//想做的是中断滑动并禁用默认滑动，暂时没找到中断的方法
  document.addEventListener('touchmove', handler, false);
 }
 if((e.changedTouches[0].clientY-scroll_start)<0){//如果是向上滑动则恢复默认滑动
  document.removeEventListener(&#39;touchmove&#39;, handler, false);
 }
});

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:

Vue2.0에서 구성 요소 및 상위-하위 구성 요소 통신을 구현하는 방법

vue2.0과 animate.css를 함께 병합하는 방법(자세한 자습서)

구현 방법 C# 문자를 정수로 변환

vue2.0에서 일반적으로 사용되는 UI 라이브러리는 무엇입니까?

스위퍼 구성요소를 사용하여 WeChat 미니 프로그램에서 이미지 전환 디스플레이를 구현하는 방법

자바스크립트에서 원형 광고 스트립을 구현하는 방법

위 내용은 모바일 브라우저 상단에서 아래로 당겨서 새로 고침하는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!