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

小云云
풀어 주다: 2018-01-29 17:18:55
원래의
2201명이 탐색했습니다.

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이 삭제되면 스플래시 화면이 표시됩니다

관련 권장 사항:


node.js의 http 모듈 및 url 모듈 소개

Laravel에서 url()의 루트 주소 수정에 대한 자세한 설명

php가 url에서 한자를 구문 분석하는 방법

위 내용은 URL을 보기 위해 아래로 스크롤하지 못하는 WeChat을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿