تحتاج إلى فهم ثلاثة عناصر DOM ، وهي: ClientHeight ، Offsetheight ، Scrolltop.
العميل: ارتفاع هذا العنصر يشغل ارتفاع المساحة بأكملها. لذلك ، إذا كان لدى DIV شريط تمرير ، فإن هذا الارتفاع لا يتضمن محتوى الجزء التالي الذي لا يعرضه شريط التمرير. وهو مجرد ارتفاع div.
Offsetheight: يشير إلى ارتفاع محتوى العنصر. وفقًا لما ورد أعلاه ، فإن هذا الارتفاع هو الارتفاع داخل DIV ، بما في ذلك الجزء المرئي والجزء غير المرئي أسفل شريط التمرير.
Scrolltop: ما هذا؟ يمكن فهمه على أنه طول شريط التمرير الذي يمكن تمريره.
على سبيل المثال ، إذا كان ارتفاع DIV هو 400 بكسل (أي العميل هو 400) ، والمحتوى الموجود في الداخل هو قائمة طويلة جدًا ، ويبلغ ارتفاع المحتوى 1000 بكسل (على سبيل المثال ، 1000). لذلك ، في الجزء المرئي ، نرى أن محتوى 400 بكسل و 1000 بكسل لا يزال 600 بكسل غير مرئي. وهذا الجزء غير المرئي هو ما يمكننا عرضه عن طريق سحب شريط التمرير. إذا لم يتم سحب شريط التمرير ، فإن scrolltop هو 0 في هذا الوقت. إذا قمت بسحب شريط التمرير إلى الأسفل ، فسيتم عرض الجزء السفلي من القائمة. في هذا الوقت ، يكون Scrolltop 600. لذلك ، فاصل القيمة لـ Scrolltop هو [0 ، 600]. لذلك يمكن فهم هذا 600 على أنه طول شريط التمرير الذي يمكن تمريره.
بعد فهم المفهوم أعلاه. من السهل معرفة ما إذا كان يلفت إلى الأسفل.
أولاً ، نسحب شريط التمرير ، ونسحب من الأعلى إلى الأسفل ، والتغيير هو قيمة scrolltop ، وهذه القيمة لها فاصل زمني.
هذا الفاصل هو: [0 ، (Offsetheight - ClientHeight)]
أي أن عملية سحب شريط التمرير بأكملها تتغير ضمن نطاق 0 إلى (عميل OffseTheight).
1.
2. ضمن 50 بكسل من الطرف السفلي من شريط التمرير: (عميل OffseTheight) scrolltop <= 50
3. في غضون 5 ٪ من مسافة شريط التمرير من الأسفل: scrolltop / (OffseTheight Clientheight)> = 0.95
على النحو الوارد أعلاه.
إذا كنت ترغب في السحب إلى الأسفل ، قم بتحميل المحتوى تلقائيًا. فقط سجل حدث Scrollbar:
نسخة الكود كما يلي:
scrollbottomtest = function () {
$ ("#احتواء"). scroll (function () {
var $ هذا = $ (هذا) ،
ViewH = $ (هذا). Height () ، // الارتفاع المرئي
contentH = $ (this) .get (0) .Scrollheight ، // ارتفاع المحتوى
scrolltop = $ (this) .scrolltop () ؛ // scroll right
// if (contentH - viewH - scrolltop <= 100) {// عند الوصول إلى أسفل 100px ، قم بتحميل محتوى جديد
إذا (scrolltop/(contenth -viewh)> = 0.95) {// عند الوصول إلى أسفل 100px ، قم بتحميل محتوى جديد
// تحميل البيانات هنا ..
}
}) ؛
}
ملاحظة: هنا أوصي بأداة استعلام عبر الإنترنت حول أحداث JS ، والتي تلخص أنواع الأحداث شائعة الاستخدام ووظائف JS:
قائمة كاملة من أحداث ووظائف JavaScript:
http://tools.vevb.com/table/javaScript_event