모바일 브라우저와 위챗 브라우저에서 바디의 스크롤 바를 금지합니다

1878 단어
일반적으로 바디 스크롤을 금지하는 방법은 오버플로우:hidden을 설정하는 것입니다.
그러나 이상하게도 모바일 브라우저와 위챗 브라우저에서 이게 작동하지 않는다는 것을 발견했다. 그리고 나는 나의 쓰기 방법을 분석했다. 바로 바디에 클라스를 붙여서 속성을 정의한 다음에 라벨의 위치를 바꾸는 것이다. 예를 들어 바디 {overflow:hidden;}.이 실현은 가능하다. 스크롤 바가 없다.
더 나아가 class로 스크롤 바가 없는 것을 실현하려면 다음과 같은 코드 설정을 해야 한다.
.index_body {
    position: fixed;
    height: 100%;
    overflow-y: hidden;  /*      PC    */
}

이것은 위아래로 미끄러지는 것을 완전히 금지하고 스크롤 바가 없으며 iOS의safari 브라우저에서는 위아래로 굴러갈 수 없지만 위챗 브라우저에서는 위아래로 축소할 수 있다는 것을 발견했다(아래에서 다시 해결한다).
나는 마지막으로 위의 이러한 해결은 보편적인 브라우저 방법이라는 것을 발견했다. 만약에 더욱 철저하게 하려면 js 코드를 직접 사용하여 터치무브의 사건을 제어하고 직접적으로 정교하게 해야 한다. 이것은 위챗과 핸드폰 브라우저에서 완성할 수 있다.
코드는 다음과 같습니다.
/*          */
$('body').on('touchmove', function (event) {
    event.preventDefault();
});

숨겨진 스크롤 막대를 설정하는 방법도 모았습니다.
1、body position:fixed;width:100%;height:100%

2、             ,    ,overflow:auto

3、html,body{height:100%;overflow:hidden}

참조:http://www.cnblogs.com/lbcheng/p/6044303.html
위의 설정을 통해 만약에 사용자가 위챗 브라우저에서 스크롤할 수 없지만 iOS의safari 브라우저로 튀어나온 후에 많은 변수가 있을 것이다. 예를 들어 높이가 부족하면 스크롤도 좀 좋아질 것이다. 그러면 나는 이렇게 설정한다.
  • 1. 위챗에서 스크롤을 기본적으로 금지하고 위아래 축소도 기본적으로 할 수 없습니다.
  • 2. 핸드폰 브라우저에서 뛰어나오면 완전히 미끄러질 수 있다.

  • 위의 접근 방식:
    1. 위챗useragent를 통해 위챗 브라우저가 자동으로class에 가입하여 설정하는 것을 판단한다.2, 비위챗useragent는 기본적으로class를 추가하지 않습니다.
    구체적인 실현:
    위챗에서 위아래 축소 금지:
    /*          */
    $('body').on('touchmove', function (event) {
       event.preventDefault();
    });
    

    위챗 브라우저를 판단하려면:
    /*         */
    if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
        $('body').addClass('index_body'); //         
    }else{
        $('body').removeClass('index_body'); //         }
    },
    

    좋은 웹페이지 즐겨찾기