التابع .scroll() في jQuery
.scroll( handler )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين مع الحدث scroll في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.
.scroll( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.scroll( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.scroll()
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي معلامات.
هذا التابع هو اختصار للتابع .on( "scroll", handler ) في شكله الأول والثاني، واختصار للتابع .trigger( "scroll" ) في شكله الثالث.
يُرسل الحدث scroll إلى العنصر window عندما يتنقَّل المستخدم في أمكان مختلفة من العنصر. يطبق هذا الحدث على الكائن widow، والإطارات القابلة للتمرير أيضًا، والعناصر التي ضبطت الخاصِّيَّة overflow فيها إلى القيمة scroll (أو القيمة auto عندما يكون ارتفاع العنصر أو عرضه الصافي أصغر من ارتفاع أو عرض محتواه).
بفرض أن لدينا شيفرة HTML التالية:
<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
طوال مسيرة حياتي كنت أتعمد إخفاء الكثير من ردود الفعل غير المستحبة بالنسبة لي، بالطبع لم أكن راضٍ عن ذلك فعندما كنت في الصف السادس الابتدائي قام أحد الأطفال في الحافلة بإخباري أنّ حذائي الرياضي كان لونه فاقعًا جدًا، وأيضًا لم يرق لي ذلك عندما سمع المسؤول التنفيذي في الشركة فكرة مشروعي الرقمي وقال: " أنا أكره هذه الفكرة"، فلقد تبين لي أن حذائي الرياضي كان فاقع اللون وفكرة مشروعي الرقمي لم تكن فكرةً مميزة، هذه التجارب وغيرها لم تساعدني على التخلص من القلق الذي أشعر به.
على أيّة حال فإنه ليس بمقدورنا تجنب ردود فعل الآخرين، حيث أن معالجة الأفكار وتغييرها وجمع ردود الفعل تشكل جزءًا كبيرًا من عملنا الذي يمكننا من الحصول على لقمة العيش. في أغلب الأحيان كانت لدي فرص كثيرة للبحث في أسباب تلقي ردود الفعل المشحونة عاطفيًا، وكانت تشكل تحدٍّ كبير بالنسبة لي لمعرفة ما هو الصواب منها.
</div>
<div id="other">
استدعِ معالج الحدث
</div>
<div id="log"></div>
يوضح هذا المثال كيفية جعل العنصر صغير بما فيه الكفاية ليكون قابلًا للتمرير.
يمكن أن يربط الحدث scroll بهذا العنصر أيضًا:
$( "#target" ).scroll(function() {
$( "#log" ).append( "<div>استُدعي معالج الحدث بنجاح</div>" );
});
عندما يمرر المستخدم النص للأعلى والأسفل، ستضاف رسالة واحدة أو أكثر إلى <div id="log"></div>. يمكن استدعاء الحدث يدويًا عبر استعمال .scroll() دون أي وسيط:
$( "#other" ).click(function() {
$( "#target" ).scroll();
});
بعد تنفيذ هذه الشيفرة، سيؤدي الضغط على "استدعِ معالج الحدث" إلى إضافة الرسالة أيضًا.
يُرسَل الحدث scroll كلما تغير موقع تمرير العنصر بغض النظر عن المسبب؛ من مسببات هذا الحدث هي: ضغط مؤشر الفأرة على شريط التمرير وسحبه، أو السحب داخل العنصر، أو الضغط على مفاتيح الأسهم، أو استعمال عجلة تمرير الفأرة.
ملاحظات إضافية
لما كان التابع .scroll() اختزالٌ للتابع .on( "scroll", handler )، فمن الممكن استعمال .off( "scroll" ) لإزالة الحدث scroll أي عملية معاكسة لما سبق.
أمثلة
فعل أي شيء عندما تمرَّر الصفحة للأعلى أو الأسفل:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll demo</title>
<style>
div {
color: blue;
}
p {
color: green;
}
span {
color: red;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>جرب أن تمرر الصفحة للأعلى والأسفل</div>
<p>فقرة - <span> حصلت عملية تمرير للصفحة</span></p>
<script>
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( window ).scroll(function() {
$( "span" ).css( "display", "inline" ).fadeOut( "slow" );
});
</script>
</body>
</html>