Cuộn "vô hạn" Javascript cho nội dung hữu hạn?

Question

Tôi có rất nhiều nội dung để hiển thị trên trang web, vì vậy tôi cần sử dụng giải pháp cuộn "vô hạn" trong đó nội dung được tải khi người dùng cuộn về phía cuối nội dung hiện đang được tải. Tuy nhiên, tôi biết chính xác có bao nhiêu dữ liệu và tôi muốn người dùng có một số hiểu biết về điều đó. Tôi không thích làm thế nào thanh cuộn làm cho nó trông giống như bạn đang gần như kết thúc nội dung, và sau đó đột nhiên thêm nội dung được tải và ngón tay cái/thanh trượt là ở giữa của cuộn theo dõi và hẹp hơn.

Giải pháp đã lên kế hoạch của tôi là tạo div sau nội dung hiện tại rất lớn, nhưng trống, sau đó thu nhỏ lại khi tôi tải thêm nội dung. Bất kỳ ý tưởng tốt hơn?

Answer 1

Giải pháp cuối cùng của tôi là tạo một bảng trong div có thanh cuộn. Tôi đặt chiều cao của bảng theo chiều cao của tổng số lượng nội dung và hàng đầu tiên với chiều cao của phần nội dung không được xem và hàng tiếp theo là nội dung đang được xem xét hiện tại.

Sau đó, tôi sử dụng một quá trình giống như được sử dụng trong trò chơi video cuộn bên, nơi bạn chỉ vẽ nội dung hiển thị trên màn hình hoặc chỉ những gì ở gần khu vực hiển thị. Tôi tận dụng các điểm tham chiếu để theo dõi vị trí người dùng đang cuộn đến và sau đó làm mới nội dung hiển thị và sử dụng chức năng cuộn jQuery để giữ người dùng tại cùng một vị trí mà họ đang xem. Vì vậy, tại bất kỳ thời điểm nào chỉ về một trang trị giá của nội dung được "hiển thị" ở trên hoặc dưới khu vực xem hiện tại.

Tôi nên lưu ý rằng tất cả "nội dung" thực sự đã có trên hệ thống của khách hàng, do đó việc tải xuống không phải là vấn đề. Vấn đề đối với tôi là "nội dung" là một cấu trúc DOM lớn, kết quả là làm chậm hệ thống của khách hàng một cách khủng khiếp nếu tôi cố xử lý tất cả cùng một lúc. Vì vậy, tôi chỉ tạo và hiển thị một phần của nó tại một thời điểm.

Điều này sẽ dẫn đến một số tình trạng lộn xộn khi màn hình được làm mới và bị lỗi nếu bạn quyết định lấy và kéo thanh cuộn xuống cuối nội dung. Nếu tôi tìm ra điều gì đó tốt hơn, tôi sẽ cập nhật điều này.

CẬP NHẬT tôi ghi nhận như thế nào để làm điều này trên trang web của tôi: http://0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/

Answer 2

Khi bạn thiết kế phần tử giao diện người dùng, điều đầu tiên bạn phải hỏi là bạn muốn người dùng cuối thực sự trải nghiệm điều gì. Bạn là giải pháp sẽ làm cho nó trông giống như một tấn dữ liệu là có đó là chưa có (và nếu nó cũ/lưu trữ các công cụ nó có thể không có liên quan đến người sử dụng). Điều đó có thể khiến người dùng không đọc được nội dung vì nó trông quá dài.

Vấn đề là thanh cuộn không được thiết kế để hỗ trợ mở rộng nội dung. Đó là, như bạn đã chỉ ra, lừa đảo cho nội dung như vậy. Bạn có thể thiết kế một tính năng cuộn hoàn toàn mới cung cấp thông tin đầy đủ

1. Chiều dài của dữ liệu được nạp
2. Chiều dài của dữ liệu dỡ sẵn
3. Nếu bạn tải về lưu trữ dữ liệu, bạn có thể muốn chỉ riêng gì phần dữ liệu được tải là dữ liệu hiện tại

Thanh cuộn màu có nền màu xanh cho biết nội dung được tải và hiện tại, phần màu vàng cho biết những gì được tải nhưng dữ liệu cũ hơn và phần màu đỏ cho biết những gì có thể được tải xuống với tư cách người dùng scr olls sẽ làm điều này khá tốt.

Answer 3

Bạn có thể chèn một ký tự không dễ thấy ở phần cuối của tài liệu tối đa (nói ở 15k pixel) sao cho thanh cuộn sẽ phản ánh chính xác độ sâu của trang nếu đó là ý của bạn. Một cái gì đó như thế này…

document.write('<div style="Position:Absolute; Left:0px; Top:15000px;";>.</div>');