2011-07-01 4 views
8

데이터 모바일 애플리케이션에서 복잡한 양식을 작성했으며 현재 제목과 바닥 글 막대의 위치를 ​​유지할 수있는 솔루션을 찾고 있습니다. 바탕 화면에서 크롬과 사파리를 사용하여 개발하고 테스트 한 바지에서, 머리말과 꼬리말을 절대 위치에 배치하고 높이를 콘텐츠 섹션으로 지정했습니다. 높이는 JavaScript의 크기 조정 이벤트에서 설정됩니다.iScroll (iOS/Webkit의 스크롤링 부문)에 대한 대안 찾기

모바일 웹킷에서는 overflow : auto가 지원되지 않으므로 모바일 세계에는 적합하지 않습니다.

나는 내 자신 만의 일을 시도했고 iScroll도 살펴 보았습니다. 사실 iScroll은 내 iPad에서 사파리를 부숴 버렸지 만 그 구성 요소가없는 응용 프로그램은 아주 부드럽게 실행됩니다. 나는 상대적으로 복잡한 형태를 많이 가지고 있는데, 이는 iScroll에 대한 도전 일 수 있습니다. 나는 이길 수 없습니다.

그래서 사용자가 두 손가락을 스크롤링에 사용하지 않고도 내 목표 (머리글 및 바닥 글 지속)를 달성 할 수있는 다른 방법을 찾고 있습니다. 사실, 아무도 "트릭"을 아는 사람이 거의 없습니다.

제안 사항?

감사합니다. 그들은 모두 간단한리스트를 스크롤하기위한 매우 깔끔한있어

  1. iScroll
  2. YUI ScrollView
  3. Scrollability

:

답변

14

그래서 세 가지 일반적으로 언급 한 솔루션이 있습니다. 그러나 동적 인 형식 등의 복잡한 대화 상자와 같이 단순한 목록 이상의 전체 페이지를 처리하는 것이 목적이라면 누구도 실제로 작동하지 않습니다.

방금 ​​포기하고 1 년을 기다리기로 결정했습니다. Apple은 최근에이 부분에 혁명을 일으키고 오늘 우리가 가진 그런 종류의 문제를 해결할 고정 및 오버 플로우 : 스크롤에 대한 지원을 발표했습니다.

오늘 저는 뮌헨에있는이 건물의 한 회사 웹 사이트를 기억하고 iPad로 열었습니다. 사실, 그 화면에는 스크롤 가능한 뉴스 섹션이있었습니다. 그래서 안쪽을 들여다 보니 ... 타다아 ... jScrollPane.

jScrollPane은 모바일 장치에서 사용하기 위해 개발되지는 않았지만 그 목적을 위해 최적화되었습니다. 그것은 단지 내 iPad, 내 안드로이드 2.3 및 최신 오페라 모바일에서도 작동합니다.

모바일 장치에서 네이티브 앱을 스크롤하는 것처럼 느껴지지는 않지만 완벽하게 사용자 정의 할 수있는 스크롤바를 볼 수 있으며 가장 위에있는 점은 무엇이든간에 한 손가락으로 스크롤 할 수 있습니다..

아주 좋습니다.

+1

처음에는 iScroll을 사용했지만 fullCalendar와 충돌했습니다. 나중에 YUI ScrollView 및 Scrollability를 시도했지만 불행히도 내 프로젝트에서 작동하도록 만들지 못했지만 jScrollPane은 매력처럼 작동했습니다. 고맙습니다. –

+2

iScroll 4와 수개월 동안, jscrollPane으로 30 초 동안, 그리고 내 html은 더 가볍습니다. –

11

이제 모바일 웹킷은 CSS 만 사용하여 스크롤을 지원합니다. '스크롤 가능'클래스를 만들고 다음 규칙을 추가하십시오.

.scrollable { 
     overflow-y: scroll; 
     -webkit-overflow-scrolling: touch; 
    } 

'스크롤 가능한'클래스를 스크롤이 필요한 블록 요소에 추가하십시오. 웹킷 전용.오버 플로우와의 현대적인 브라우저를 할 수

+0

넵, iOS 5가 소개되었습니다. (지난 여름에 요청한 후 꽤 오랜 동안) –

+1

나는이 접근 방식을 사용했기 때문에이 게시물로 안내하게되었습니다. 그것은 끔찍한 일입니다. 이벤트는 완전히 예측할 수 없으므로 사용자가 스크롤을 중지 할 때 걱정되는 부분에 사용하기가 어렵습니다. – Kir

1

https://github.com/filamentgroup/Overthrow/

경량 polyfill 기반 솔루션 : 스크롤 지원은 자신의 일을.

아직 초기 개발 단계이지만 영향을받는 사용자가 가장 큰 사용자 (android 2.2/2.3/iOS < 5)에서 잘 작동합니다.