Jan 4
7

Detect scrolling bottom của thẻ DIV

Đăng trong danh mục Javascript, Web Programming bởi admin | Tags: , , , , , ,

detect-scrolling-to-bottom-of-a-div-banner

Đang triển khai cái dzụ Scrolling Ajax, tính kiếm cái plugin nào xài thử thì chẳng thấy cái nào tốt và phù hợp ý mình cả, thôi thì tự sướng. Scrolling Ajax là cái chức năng dàn trang cao cấp mà bạn không cần phải nhấn link để sang trang khác, chỉ việc dùng thanh cuộn, kéo xuống hết thì nó sẽ tự động load tiếp nội dung của trang sau (sử dụng Ajax). Sau 1 hồi phân tích thì cái khó nhất của vụ án Scrolling Ajax không phải là load ajax mà là…làm sao biết đang ở cuối trang.

Search đã đời cùng với ngồi thử nghiệm thì chẳng thấy cái nào chạy được, buồn vài phút, ngồi lẩm nhẩm thì ra cách thực hiện và công thức để tính được làm sao phát hiện người dùng đã kéo. Bài toán của mình là dùng cho thanh cuộn của 1 thẻ DIV có fix height (cái này dân làm CSS nói ra biết liền) và các giá trị là tính từ DIV này mà có được.

Đã test trên winxp với các trình duyệt: IE6,7, Firefox 3, Google Chrome, Opera 10, Safari 4

Vì không có nhiều thời gian nên quăng nguyên cái hình mình ngồi phân tích và ghi chú cùng với công thức để chia sẽ với ai quan tâm (chắc không nhiều người đâu, nếu đụng tới mấy cái chức năng dạng này thì bạn cũng dữ dằn, rất hân hạnh được quen biết ^^)

javascript-detect-scrolling-bottom-of-fix-height-div

Bài viết liên quan:

7 Lời bình cho bài viết “Detect scrolling bottom của thẻ DIV”

  • wpviet
    January 5, 2010 at 11:31 pm

    Lâu lắm rồi không vô blog của anh hai! vẫn khó hiểu và dễ đọc như ngày xưa. Dạng ý tưởng đọc thấy dễ mà làm thì “đui” mắt quá à. Em vừa đọc cái plugin “Paginator or Paginator 3000″. Cũng là một dạng chuyển trang. Nhưng thực sự ý em là vẫn chưa hình dung ra cái điều anh hai đang nói. Có phải là khi nào kéo chuột cộc trang thì tự động chuyển sang trang kế tiếp không ạ?? Nhưng như vậy thì cũng có vấn đề đó anh. Hihi

    [Reply]

    admin Reply:
    January 6th, 2010 at 10:26 am

    Cái đó không phải ý của anh rồi. Ý của anh là mình sẽ load nội dung của trang tiếp theo khi người ta scroll tới cuối cùng, và nội dung mới sẽ được gắn thêm vào nội dung sẵn có, giống như sẽ làm 1 dạng “dài vô hạn” và không có phân trang. Giống vậy nè: http://www.webresourcesdepot.com/dnspinger/

    [Reply]

    Reply
  • UenX
    January 7, 2010 at 12:49 am

    Em hay vào blog của anh. Hay và bổ ích :) Em k biết nhiều về Ajax hay CSS, nhưng em xin góp ý 1 chút cho vụ Scrolling Ajax:
    Mình nên load thêm nội dung mới ngay khi người dùng cuộn gần đến cuối ( có thể là cách bottom khoảng 100px…) để khi cuộn đến cuối thì có thể hiện ngay nội dung mới luôn, bởi nếu tốc độ load chậm thì khi cuộn hết người dùng sẽ phải chờ nó load ( hơi khó chịu ) :) . Cũng có nhiều cách khác cho vụ này, nhưng mục tiêu chung vẫn là khiến người dùng cảm thấy thoải mái nhất :)
    Hì. Có lẽ anh cũng đã nghĩ tới chuyện này rồi.
    Chúc anh ngày mới vui vẻ! :)

    [Reply]

    admin Reply:
    January 7th, 2010 at 1:14 am

    Hi, bạn nói đúng rồi đó. Khi anh triển khai thực tế thì công thức như thế chưa đủ, tùy vào ứng dụng mà developer có thể tạo 1 vùng kích hoạt để chỉ cần scroll vào vùng này thì gọi xử lý ajax. Còn vùng kích hoạt này to hay nhỏ thì tùy vào item hiển thị của mỗi ứng dụng, có ứng dụng 1 row có tí xíu, có ứng dụng 1 row cao cả trăm px nên phải tùy cơ ứng biến :D . Cảm ơn bạn đã ghé thăm blog và để lại lời nhắn ^^.

    [Reply]

    Reply
  • UenX
    January 7, 2010 at 1:36 am

    Her, thế nên em để dấu … sau chữ 100px mà :D Cái kích thước tuỳ cơ ứng biến đó có lẽ phải dựa vào % height đã cuộn , rồi thời gian load trung bình của các item mới nữa
    –> vân vân.. –> cầu toàn–> haizz :(
    –> Chúc anh ngủ ngon :)

    [Reply]

    Reply
  • wpviet
    January 18, 2010 at 12:21 am

    em có trang demo rồi anh ạ. http://sortfolio.com/?source=deck nó như trang đó phải ko anh. mà em cũng chưa tìm hiểu mấy cái đó làm sao nữa

    [Reply]

    Reply
  • Gia Khang
    September 18, 2011 at 2:45 pm

    Down source về nghiên cứu nè anh em: http://www.webresourcesdepot.com/wp-content/uploads/file/wrd-scroll.zip

    [Reply]

    Reply

Viết lời bình



Bình luận mới nhất

Menu

Danh mục

Lưu trữ



Tags