2011-07-01 17 views
8

Tôi đã tạo một biểu mẫu phức tạp trên ứng dụng di động dữ liệu và hiện đang tìm kiếm giải pháp để duy trì vị trí của tiêu đề và thanh chân trang. Trong giả của tôi, đã được phát triển và thử nghiệm với Chrome và Safari trên máy tính để bàn của tôi, tôi chỉ định vị đầu trang và chân trang tuyệt đối, cũng như phần nội dung, chiều cao được đặt bởi JavaScript trên sự kiện thay đổi kích thước của cửa sổ.Tìm kiếm giải pháp thay thế cho iScroll (Scrolling Div trên iOS/Webkit)

Đó không phải là cách thích hợp cho thế giới di động, vì tràn: tự động không được hỗ trợ trên WebKit di động.

Tôi đã thử một số điều của riêng mình và tôi cũng đã xem iScroll. Trong thực tế, iScroll bị rơi safari trên iPad của tôi trong khi ứng dụng mà không có thành phần đó chạy khá trơn tru. Tôi có rất nhiều hình thức tương đối phức tạp, có thể là một challange cho iScroll, mà tôi không thể thắng được. Vì vậy, tôi đang tìm kiếm các cách khác để đạt được mục tiêu của mình (đầu trang và chân trang liên tục) mà không cho phép người dùng sử dụng hai ngón tay để cuộn (trên thực tế, hầu như không ai biết rằng "lừa").

Mọi đề xuất?

Cảm ơn!

Trả lời

14

Vì vậy, có ba giải pháp thường được đề cập:

  1. iScroll
  2. YUI ScrollView
  3. Scrollability

Họ đều rất gọn gàng cho di chuyển qua danh sách đơn giản. Nhưng không ai thực sự làm việc nếu mục đích của nó là để xử lý các trang đầy đủ với nhiều hơn chỉ là một danh sách, ví dụ như các hộp thoại phức tạp với các hình thức động và vân vân.

Tôi vừa quyết định từ bỏ và chờ một năm - Apple gần đây đã công bố hỗ trợ cho vị trí: cố định và tràn: cuộn, sẽ cách mạng hóa phần này và giải quyết tất cả những vấn đề mà chúng ta có hiện nay.

Hôm nay tôi nhớ một trang web của một công ty trong tòa nhà của chúng tôi ở Munich, mở nó bằng iPad, và thực sự, nó có một phần tin tức có thể cuộn trên frontpage của nó. Vì vậy, tôi nhìn vào bên trong và thấy rằng nó đang sử dụng ... tadaaa ... jScrollPane.

Tôi không nghĩ rằng jScrollPane được phát triển để sử dụng nó trên thiết bị di động, nhưng nó cũng đã được tối ưu hóa cho mục đích đó. Nó chỉ hoạt động trên iPad của tôi, Android 2.3 của tôi và cũng trên Opera Mobile mới nhất.

Không giống như cuộn ứng dụng gốc trên thiết bị di động, nhưng nó cho phép bạn xem thanh cuộn hoàn toàn có thể tùy chỉnh, nhảy lên trên và tới mông và, quan trọng nhất là để cuộn bằng một ngón tay.

Rất đẹp.

+1

Ban đầu tôi đã sử dụng iScroll, nhưng nó xung đột với fullCalendar. Sau đó tôi đã thử YUI ScrollView và Scrollability, nhưng tiếc là đã không thể làm cho họ làm việc trong dự án của tôi ... nhưng jScrollPane làm việc như một say mê! Cảm ơn bạn. –

+2

Mua với iScroll 4 trong tháng, 30 giây với jscrollPane và html của tôi nhẹ hơn. –

11

Webkit di động hiện hỗ trợ cuộn bằng chỉ sử dụng CSS. Tạo một lớp 'có thể cuộn' và thêm các quy tắc sau:

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

Thêm lớp 'cuộn được' của bạn vào bất kỳ phần tử khối nào yêu cầu cuộn. Chỉ Webkit.

+0

yep, đã được giới thiệu với iOS 5 (khá lâu sau khi tôi yêu cầu nó vào mùa hè năm ngoái) –

+1

Tôi đã sử dụng cách tiếp cận này và đó là những gì đã dẫn tôi đến bài đăng này. Thật kinh khủng. Các sự kiện mà nó bắn là hoàn toàn không thể đoán trước, làm cho nó khó sử dụng trên bất cứ điều gì nghiêm trọng nơi bạn quan tâm khi người dùng ngừng cuộn. – Kir

1

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

polyfill Lightweight giải pháp dựa cho phép trình duyệt hiện đại với overflow: di chuyển hỗ trợ làm việc của họ.

Vẫn đang trong giai đoạn phát triển ban đầu, nhưng hoạt động khá tốt trên cơ sở người dùng bị ảnh hưởng lớn nhất (android 2.2/2.3/iOS < 5).

Các vấn đề liên quan