손가락 2 개를 사용하지 않고 iPhone에서 스크롤 가능한 div?

StackOverflow https://stackoverflow.com/questions/615357

  •  03-07-2019
  •  | 
  •  

문제

iPhone 앱에 Uiwebview가 포함되어 있으며 스크롤 가능한 센터 DIV와 함께 항상 페이지에 잠긴 헤더와 바닥 글 div를 유지하고 싶습니다.

uiview 컨트롤 인 헤더/바닥 글을 사용 하여이 작업을 수행 할 수 있지만 순수한 HTML/JS/CSS 솔루션이 Android/Palmpre/Adobeair로 포트가 더 쉬워 지므로 헤더와 바닥 글이 HTML Divs가되기를 원합니다. 비교적 곧 내 TODO 목록에 올 것입니다.

여기에 언급 된 것과 같은 기술을 사용 하여이 작업을 수행 할 수 있습니다.

http://depunc.com/blog/?p=94

그러나이를 위해서는 사용자가 2 개의 손가락을 사용하여 DIV를 스크롤해야합니다. 이는 나에게 만족스럽지 않습니다.

이 작업을 수행하는 방법에 대한 제안이 있습니까?

감사,

브래드

도움이 되었습니까?

해결책

헤더와 바닥 글로 재사용 가능한 솔루션을 구현 한 사람을 찾았습니다.

http://cubiq.org/iscroll-4

다른 팁

나는 Uiwebview에 너무 익숙하지 않으므로 이것은 완전히 어리석은 제안 일 수 있습니다. 그러나 페이지에 세 개의 uiwebviews가있는 것을 막는 것이 있습니까? 하나는 헤더, 하나는 몸을위한 것, 바닥 글을위한 것입니다. 헤어지는 것은 올바른 아이디어처럼 들리기 때문입니다.

이것이 당신이 찾고있는 것입니까? iPhone 장치 또는 시뮬레이터 에서이 링크를 엽니 다.

index.html 파일에는 "헤더", "컨테이너"및 "바닥 글"에 대한 세 가지 div 요소가 본체 바로 아래에 있으며 모든 작업은 고정 된.js 파일에서 수행됩니다. 문서는 "TouchMove"이벤트의 일반적인 조치를 취소하여 제자리에 고정됩니다.

    // Disable flick events
    disableScrollOnBody : function() {
        document.body.addEventListener("touchmove", function(e) {
            e.preventDefault();
        }, false);
    },

그런 다음 많은 작업이 "TouchStart", "TouchMove"및 "TouchEnd"이벤트를위한 이벤트 리스너를 만듭니다. 논리는 단순히 "내용"Div를 위아래로 움직이기 위해 요약됩니다.

이 솔루션은 100% HTML/CSS/JavaScript이지만 휴대 성을 제한 할 수있는 WebKit 독점 CSS 및 JavaScript가 있습니다. 다른 모바일 장치에서 작업하려면 약간의 조정이 필요할 수 있지만 시작하기에 좋은 개념 증명이 될 것입니다.

나는이 멋진 샘플 프로젝트를 만들지 않았고, 단지 그것을 지역 사회의 관심에 가져오고 있습니다. 자세한 내용과 지핑 프로젝트에 대한 링크를 보려면 Richard "Doctyper"Herrara의 전체 게시물을 읽으십시오. 모바일 사파리에서 고정 포지셔닝.

Clunky 일 수 있지만 사용자가 스크롤 할 때 DIV 위에 헤더와 바닥 글을 재배치 할 수 있습니다. 이렇게하면 메인 DIV를 스크롤 할 필요가 없습니다. 그래도 프레임을 사용하는 데 도움이되지 않습니다.

이것은 iPhone/Touch에서 더 자극적 인 브라우저 문제 중 하나입니다. 일반 브라우저처럼 페이지의 일부에 집중할 수 있기를 바랍니다.

CSS의 경우 참조 만 참조하십시오 사파리 CSS 참조 아마도 당신이 찾고있는 것을 가지고있을 것입니다. "-webkit"또는 "-khtml"로 시작하는 데 특히 관심이 있으므로 3D 및 터치와 같은 WebKit에서만 사용할 수있는 확장 속성이므로 특히 관심이 있습니다. 안드로이드에도 적용해야합니다.

JavaScript와 함께 WebKit DOM 프로그래밍 주제 소개 그리고 WebKit Dom API 참조 가이드입니다. 확실히 살펴보십시오 라이트 테이블 데모 약간의 복사 및 붙여 넣기의 경우 접촉을 처리 할 때 JavaScript를 붙여 넣습니다.

나는 iPhone에서 iscroll을 구현했으며 정말 매끄럽고 빠르며 원하는대로 할 수 있습니다. 단점은 안드로이드 (1.6)가 내가 원하는 방식을 스크롤하는 것을 거부하고 때로는 다른 JavaScript가있는 경우 때로는 다른 JavaScript를 차단한다는 것입니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">

HTML 코드에 추가하면 문제가 해결 될 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top