URL을 보기 위해 아래로 스크롤하지 못하는 WeChat을 처리하는 방법-위챗 개발-php.cn

URL을 보기 위해 아래로 스크롤하지 못하는 WeChat을 처리하는 방법

小云云

풀어 주다： 2018-01-29 17:18:55

원래의

2183명이 탐색했습니다.

WeChat의 보안 정책 중 하나이자 사용자 친화적인 대화형 경험인 WeChat에서 풀다운을 하면 URL을 볼 수 있습니다. 이 글에서는 주로 WeChat에서 URL을 볼 수 있도록 풀다운을 비활성화하는 방법을 소개합니다. 참고하셔서 모두에게 도움이 되었으면 좋겠습니다.

효과 원리:

WeChat 드롭다운 탄력 효과는 실제로 브라우저 자체의 기능이며 초점은 스크롤 값의 표현입니다.

처리 전략:

1. 모바일 측의 touchmove 이벤트

이 전략은 일반적으로 페이지에 화면이 하나만 있고 풀다운이 필요하지 않은 경우에 적용 가능합니다.

var touch1 = function(){
  document.querySelector(‘body‘).addEventListener(‘touchmove‘, function (e) { 
    e.preventDefault(); 
  });
}

로그인 후 복사

단점: 다양한 크기의 화면에서는 콘텐츠는 한 화면에 표시될 수 있습니다. 그렇지 않으면 2개 이상의 화면에 있는 콘텐츠가 표시되지 않습니다.

2. 터치 이동을 비활성화하고 스크롤 위치가 상단에 도달하는지 확인합니다. < = 10으로 터치무브 이벤트를 금지하고, 먼저 위로 당겼다가 아래로 당기는 상황이 있다고 생각하여 터치엔드 이벤트를 모니터링하고 터치 이벤트 스트림에서 가장 높은 지점 위치를 계산하여 판단합니다

var touch2 = function () {
  var lastY;//最后一次y坐标点
  var betterY;//每次touch最高点
  document.querySelector(‘body‘).addEventListener(&#39;touchstart&#39;, function(event) {
    lastY = event.originalEvent.changedTouches[0].clientY;
    betterY = lastY;
  });
  document.querySelector(‘body‘).addEventListener(&#39;touchmove&#39;, function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    if(y > betterY){
      betterY = y;
    }
    var st = document.body.scrollTop; //滚动条高度
    if (y >= lastY && st <= 10) {
      lastY = y;
      event.preventDefault();
    }
    lastY = y;
  });
  document.querySelector(‘body‘).addEventListener(&#39;touchend&#39;, function(event) {
    var y = event.originalEvent.changedTouches[0].clientY;
    var st = document.body.scrollTop; //滚动条高度
    if(y < betterY && st <= 10){
      event.preventDefault();
    }
  });
}

로그인 후 복사

단점 : 첫 번째 터치무브에도 허점이 있고, 터치무브 과정에도 허점이 있습니다

3. 스크롤의 스크롤 이벤트를 모니터링합니다. 금지된 높이 <0;

스크롤 막대의 높이가 0보다 작을 때마다 0으로 재설정됩니다. , 강제로 최상위 위치로 복귀

var touch3 = function () {
  window.onscroll = function () {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top <= 0){
      document.body.scrollTop = 0;
    }
  }
}

로그인 후 복사

단점: 드롭다운 URL이 삭제되면 스플래시 화면이 표시됩니다