모바일 브라우저와 위챗 브라우저에서 바디의 스크롤 바를 금지합니다
그러나 이상하게도 모바일 브라우저와 위챗 브라우저에서 이게 작동하지 않는다는 것을 발견했다. 그리고 나는 나의 쓰기 방법을 분석했다. 바로 바디에 클라스를 붙여서 속성을 정의한 다음에 라벨의 위치를 바꾸는 것이다. 예를 들어 바디 {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. 위챗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'); // }
},
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.