JS_javascript 기술을 통해 모바일 브라우저의 주소 표시줄을 자동으로 숨기는 구현 원리 및 코드-JS 튜토리얼-php.cn

모든 사람은 휴대폰에 기본 제공되는 브라우저를 통해 Baidu와 Taobao를 엽니다. 홈페이지가 로드되면 페이지 상단의 주소 표시줄이 자동으로 숨겨집니다. 또한 이러한 웹사이트는 모바일 브라우저에 최적화되어 있습니다. 얼핏보면 정말 구별이 어렵네요. 아래 왼쪽 사진은 사파리를 통해 열린 타오바오 홈페이지입니다. 네이티브 앱처럼 보입니다. 실제로 주소가 있습니다. 아래로 드래그하면 아래 오른쪽 그림과 같이 주소 표시줄이 표시됩니다.

브라우저 주소 표시줄을 숨기는 방법은 무엇입니까? Baidu에는 정보가 많지만 매우 간단합니다. 주로 window.scrollTo() 메서드를 사용하여 화면에서 현재 페이지를 위로 스크롤하면 다음과 같이 주소 표시줄이 시야를 초과하게 됩니다.

코드 복사 코드는 다음과 같습니다.

<script> function(){ <br>setTimeout(function() { <br>window.scrollTo(0, 1) <br>}, 0) <br></script>

그러나 예를 들어 간단한 페이지를 한마디로 만들면 위 스크립트를 사용하면 슬프게도

주소 표시줄이 자동으로 숨겨지지 않습니다; 이 브라우저에서는 window.scrollTo() 메서드가 적용되지 않습니까? 그러나 웹페이지에 콘텐츠가 많고 화면 높이를 초과하는 경우 주소 표시줄이 자동으로 숨겨집니다.

콘텐츠가 적을 때 주소 표시줄을 숨기는 방법은 무엇입니까? 스크롤하기 전에 프로그램은 본문의 높이를 동적으로 설정해야 합니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {

bodyTag = document.getElementsByTagName('body')[0] 
bodyTag .style.height = document.documentElement .clientWidth / screen.width * screen.height 'px'; 
}


다음은 페이지의 예입니다(주소 표시줄은 기본) 오른쪽 사진은 주소창을 아래로 내린 후의 스크린샷입니다.

코드 복사 코드는 다음과 같습니다.

<머리>

我是个网页，但不显示滚动条
<스크립트>
window.onload=function(){
if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height 'px';
}
setTimeout(function() {
window.scrollTo(0, 1)
}, 0);
};

<스타일>
/*输入框圆角显示*/
입력 {
배경:#fff; 테두리: 1px 실선 #080;
패딩:5px;
-webkit-border-radius:5px;
}
/* 버튼
-------------------------------------- --------- */
.button {
디스플레이: 인라인 블록;
확대/축소: 1; /* 확대/축소 및 *display = display:inline-block에 대한 ie7 해킹 */
*display: inline;
수직 정렬: 기준선;
여백: 0 2px;
개요: 없음;
커서: 포인터;
텍스트 정렬: 가운데;
텍스트 장식: 없음;
글꼴: 14px/100% Arial, Helvetica, sans-serif;
패딩: .5em 2em .55em;
텍스트 그림자: 0 1px 1px rgba(0,0,0,.3);
-웹킷-국경-반경: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* 녹색 */
.green {
color: #e8f0de;
테두리: 단색 1px #538312;
배경: #64991e;
배경: -webkit-gradient(선형, 왼쪽 위, 왼쪽 아래, from(#7db72f), to(#4e7d0e));
}

帐号：

密码：