תיאור:
מקשר מטפל אירוע לאירוע "scroll" JavaScript, או מפעיל אירוע הזה על אלמנט.
.scroll( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.scroll( )
הוספה בגרסה: 1.0
.scroll( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של
.bind('scroll', handler)
בוריאציה הראשונה, ו-.trigger('scroll')
בשניה.
אירוע scroll
נשלח לאלמנט, כאשר משתמש מגלגל למקום אחר באלמנט.
זה מתייחס לאובייקטים
window,
אבל גם לחלונות עם גלילה ואלמנטים עם מאפיין
CSS overflow
שמוגדר ל-
scroll (או auto,
כאשר גובה של אלמנט קטן מגובה של תוכן שלו).
לדוגמא, נתבונן על HTML:
<div id="target" style="overflow: scroll; width: 200px; height: 100px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
מוגדרים מאפייני סיגנון, כדי שאלמנט מטרה יהיה קטן מספיק, שיהיה לו גלילה צדדית:
מטפל אירוע scroll
יכול להיות מקושר לכל אלמנט:
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});
עכשיו, כאשר משתמש מגלגל טקסט למעלה ולמטה, אחת או יותר הודעות תצורף ל-
<div id="log"></div>:
Handler for .scroll() called.
אנחנו גם יכולים להפעיל אירוע, כאשר אלמנט אחר נלחץ:
$('#other').click(function() {
$('#target').scroll();
});
אחרי הפעלת קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.
אירוע scroll
נשלח כל פעם כאשר מיקום של אלמנט גלילה משתנה, ללא קשר לסיבה.
לחיצה על כפתור או גרירת פס גלילה, גרירה בתוך האלמנט, לחיצה על כפתורים עם חצים, או שימוש בגלגל הגלילה של העכבר
יכול לגרום לאירוע הזה.
דוגמאות
לעשות משהו כשהדף מוגלל (scrolled):דוגמא - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("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> <style> div { color:blue; } p { color:green; } span { color:red; display:none; } </style> </head> <body> <div>Try scrolling the iframe.</div> <p>Paragraph - <span>Scroll happened!</span></p> </body> </html>
האם מידע זה היה מועיל?
