WebView에 페이지 방향 스크롤 이벤트 추가하기
수요
WebView에서 스크롤 방향을 감지하고 방향에 따라 원래 UI를 숨기거나 표시합니다.예를 들어 아래로 굴러갈 때 내비게이션 표시줄을 숨기고 위로 표시한다.스크립트 주입
그래서 우리는
injectedJavaScript 속성을 이용하여 페이지에 스크립트를 주입하고 페이지의 스크롤을 감청한 후 postMessage RN 클라이언트에게 데이터를 보내서 통신할 계획이다.그래서 스크립트를 주입해서 이렇게 썼어요.
(function(){
var callback=function(status){
window.postMessage('scroll:' +status);
}
var a=document.body.scrollTop;
window.addEventListener('scroll',function(){
var b=document.body.scrollTop;
var c=b-a;
if (c===0)return;
callback(c>0?'d':'u')
a=b;
}, false);
})(window);
한 줄로 압축 (Android에서 실행되지 않는 경우):
(function(){var callback=function(status){window.postMessage('scroll:'+status)};var a=document.body.scrollTop;window.addEventListener('scroll',function(){var b=document.body.scrollTop;var c=b-a;if(c===0)return;callback(c>0?'d':'u');a=b},false)})(window);
스크립트 감청
데이터를 보내는 스크립트를 주입했으니 RN 쪽에서 감청 판단을 합시다!
간단합니다. WebView 설정
onMessage 이벤트는 다음과 같습니다. onMessage={e => {
const { data } = e.nativeEvent;
if (data === 'scroll:d') {
this.toolBar.hide();
} else if (data === 'scroll:u') {
this.toolBar.show(this.webView)
}
}}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
