تصف هذه المقالة طريقة JS لتحديد ما إذا كان شريط التمرير قد وصل إلى أسفل أو أعلى الصفحة. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
غالبًا ما نرى العديد من مواقع الويب التي تعود إلى التأثير العلوي هي أنه عندما نقوم بالتمرير للشريط إلى الموضع المحدد ، فإنه سيعود إلى الأعلى ، وإلا فإنه سيتم إخفاءه تلقائيًا. اسمحوا لي أن أقدم مبادئ وطرق تنفيذ هذا التأثير.
عندما تكون المنطقة المرئية أصغر من الارتفاع الفعلي للصفحة ، يتم تحديد أن شريط التمرير يظهر ، أي:
نسخة الكود كما يلي: if (document.documentElement.clientheight <document.documentElement.offSetheight) scroll = true ؛
لاستخدام document.documentElement ، يجب عليك إضافة إعلان على رأس الصفحة:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
في الواقع ، لا يعمل هذا الرمز لأنه لم يعتبر مشكلة ، أي حدود المتصفح. عندما نحصل على ارتفاع الصفحة ، فإنه يتضمن حدود المتصفح. حدود المتصفح هي 2 بكسل ، لذلك على أي حال ، يكون العميل دائمًا أصغر من Offsetheight ، مما يجعله صحيحًا حتى بدون شريط التمرير. لذلك ، نحن بحاجة إلى تصحيح هذا الخطأ. يجب تغيير الرمز على هذا النحو وطرح 4 بكسل على Offsetheight ، أي:
انسخ رمز الرمز كما يلي: if (document.documentElement.clientheight <document.documentElement.offsetheight-4) {
// تنفيذ البرامج النصية ذات الصلة.
}
أيضًا ، نحتاج إلى معرفة ذلك هنا أن الكود أعلاه يحكم شريط التمرير الأفقي. نحتاج عمومًا إلى الحكم على التمرير العمودي ، والرمز كما يلي:
انسخ الرمز كما يلي: if (document.documentElement.ClientWidth <document.documentElement.offsetWidth-4) {
// تنفيذ البرامج النصية ذات الصلة.
}
لتحديد ما إذا كان شريط التمرير قد تم سحبه إلى أسفل الصفحة ، يمكنك استخدام الكود التالي
انسخ الرمز كما يلي: window.onscroll = function () {
var marginbot = 0 ؛
if (document.documentElement.scrolltop) {
marginBot = document.documentElement.scrollheight (document.documentElement.scrolltop+document.body.scrolltop) -document.documentElement.clientheight ؛
} آخر {
marginBot = document.body.scrollheight document.body.scrolltop- document.body.clientheight ؛
}
if (marginBot <= 0) {
// افعل شيئًا
}
}
مثال 2
تبحث عنها عبر الإنترنت. متصفح جدا متوافق. الغريب ، لم أجد أي معلومات ذات صلة في المستند. انشر الكود.
انسخ الرمز كما يلي:/**************************
* خذ ارتفاع شريط التمرير النافذة
*********************/
وظيفة getScrollTop ()
{
var scrolltop = 0 ؛
if (document.documentElement && document.documentElement.scrolltop)
{
scrolltop = document.documentElement.scrolltop ؛
}
آخر إذا (document.body)
{
scrolltop = document.body.scrolltop ؛
}
إرجاع scrolltop.
}
/***************************
* خذ ارتفاع النطاق البصري للنافذة
***********************/
وظيفة getClientheight ()
{
var clientHeight = 0 ؛
if (document.body.clientheight && document.documentElement.clientheight)
{
var clientHeight = (document.body.clientheight <document.documentElement.clientheight)؟ document.body.clientheight: document.documentElement.Clientheight ؛
}
آخر
{
var clientHeight = (document.body.clientheight> document.documentElement.clientheight)؟ document.body.clientheight: document.documentElement.Clientheight ؛
}
إرجاع العميل ؛
}
/***************************
* خذ الارتفاع الفعلي لمحتوى المستند
***********************/
وظيفة getScrollheight ()
{
return Math.Max (document.body.scrollheight ، document.documentElement.Scrollheight) ؛
}
اختبار الوظيفة () {
إذا (getScrollTop ()+getClientheight () == getScrollheight ()) {
تنبيه ("الوصول إلى القاع") ؛
}آخر{
تنبيه ("لم تصل إلى القاع") ؛
}
}
التجديد:
أعلن DTD:
أي
document.documentElement.Scrollheight جميع ارتفاع المحتوى من المتصفح ، document.body.scrollheight ارتفاع محتوى المتصفح
document.documentElement.Scrolltop متصفح Scrolls ارتفاع جزء ، document.body.scrolltop هو دائما 0
document.documentElement.clientheight ارتفاع الجزء المرئي للمتصفح ، document.body.clientheight ارتفاع محتوى المتصفح
وما يليها
document.documentElement.Scrollheight جميع ارتفاع المحتوى من المتصفح ، document.body.scrollheight ارتفاع محتوى المتصفح
document.documentElement.Scrolltop متصفح Scrolls ارتفاع جزء ، document.body.scrolltop هو دائما 0
document.documentElement.clientheight ارتفاع الجزء المرئي للمتصفح ، document.body.clientheight ارتفاع محتوى المتصفح
الكروم
document.documentElement.Scrollheight جميع ارتفاع المحتوى من المتصفح ، document.body.scrollheight ارتفاع محتوى المتصفح
document.documentElement.scrolltop هو دائمًا 0 ، document.body.scrolltop متصفح التمرير
document.documentElement.clientheight ارتفاع الجزء المرئي للمتصفح ، document.body.clientheight ارتفاع محتوى المتصفح
لم يعلن DTD:
أي
document.documentElement.scrollheight ارتفاع الجزء المرئي للمتصفح ، document.body.scrollheight ارتفاع جميع محتوى المتصفح
document.documentElement.scrolltop هو دائمًا 0 ، document.body.scrolltop متصفح التمرير
document.documentElement.clientheight هو دائمًا 0 ، document.body.clientheight ارتفاع الجزء المرئي للمتصفح
وما يليها
document.documentElement.scrollheight ارتفاع الجزء المرئي للمتصفح ، document.body.scrollheight ارتفاع جميع محتوى المتصفح
document.documentElement.scrolltop هو دائمًا 0 ، document.body.scrolltop متصفح التمرير
document.documentElement.clientheight ارتفاع كل محتوى المتصفح ، document.body.clientheight ارتفاع الجزء المرئي للمتصفح
الكروم
document.documentElement.scrollheight ارتفاع الجزء المرئي للمتصفح ، document.body.scrollheight ارتفاع جميع محتوى المتصفح
document.documentElement.scrolltop هو دائمًا 0 ، document.body.scrolltop متصفح التمرير
document.documentElement.clientheight ارتفاع كل محتوى المتصفح ، document.body.clientheight ارتفاع الجزء المرئي للمتصفح
ارتفاع جميع محتوى المتصفح هو ارتفاع إطار المتصفح بأكمله ، بما في ذلك مجموع ارتفاع جزء شريط التمرير + الجزء المرئي + الجزء المخفي في الأسفل
إن ارتفاع جزء من المتصفح هو ارتفاع شريط التمرير جزء من الارتفاع لرؤية ارتفاع الجزء العلوي من الكائن بأكمله.
بعد فهم المعلمات المذكورة أعلاه ، يمكننا إنشاء تأثير التمرير المتوافق مع متصفحات IE و FF و Chrome.
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.