Scrolling ενός iframe με mousewheel σε IE

Ο Firefox έχει ένα ιδιαίτερα χρήσιμο feature, από αυτά που φαίνονται τόσο φυσικά που δεν τα παρατηρείς καν, εκτός αν σταματήσουν να υπάρχουν: Επιτρέπει να κάνεις scrolling ενός iframe με τη ρόδα του ποντικιού.

Πρόσφατα κλήθηκα να σχεδιάσω ένα Windows Vista sidebar gadget. Όσοι δεν το ξέρετε, σίγουρα θα το υποψιάζεστε: Τα Windows Vista Sidebar Gadgets χρησιμοποιούν τη “μηχανή” του IE. Γνώριζα από παλαιότερη παρατήρηση ότι ο IE δεν διαθέτει αυτό το τόσο χρήσιμο feature, αλλά συνειδητοποίησα πόσο πραγματικά ενοχλητική είναι η απουσία του, καθώς ανέπτυσσα το gadget. Κάτι έπρεπε να κάνω. Αφού δεν υπήρχε το feature, θα το δημιουργούσα εγώ.

Τελικά η υλποίηση δεν αποδείχθηκε ιδιαίτερα δύσκολη, δεδομένου τουλάχιστον ότι επρόκειτο για κώδικα που θα εκτελείται αποκλειστικά στον IE. Καταρχάς, δημιουργούμε μια συνάρτηση scrollFrame() η οποία θα καλείται στο event onmousewheel. Το event αυτό το αναθέτουμε στο document του iframe. Παραδείγματος χάριν:

document.getElementById('flyoutFrame').contentWindow.document.onmousewheel = scrollFrame

Το παραπάνω αφορά ένα iframe με id flyoutFrame, όπως ελπίζω ότι είναι προφανές.

Έπειτα, ορίζουμε τη συνάρτηση scrollFrame:

function scrollFrame(evt)
{
	window.frameWin = document.getElementById('flyoutFrame').contentWindow;
	// Θα αρκούσε μόνο το evt = window.event μιας και ξέρουμε ότι απευθύνεται σε ΙΕ, αλλά η συνήθεια κόβεται δύσκολα...
	evt = evt || frameWin.event;
	// Προς τα πάνω ή προς τα κάτω; Το πρόσημο του wheelDelta ξέρει.
	var delta = evt.wheelDelta;
	// Ορίζουμε πόσο γρήγορο θέλουμε να είναι το scroll. Η τιμή που θέτουμε εδώ είναι πόσα pixels θα
	// ανεβαίνει/κατεβαίνει η σελίδα κάθε φορά που γυρίζει η ρόδα.
	var scrollDiff = 50;
	// Το παρακάτω είναι ένας γρήγορος τρόπος να ορίσουμε το σωστό πρόσημο στο scrollDiff σε μια γραμμή.
		scrollDiff = scrollDiff * delta/Math.abs(delta);
	// Και μετά την επεξεργασία των δεδομένων, έρχεται η χρησιμοποιήση τους...
	frameWin.document.documentElement.scrollTop -= scrollDiff;
}

Όπως θα δείτε έχω προσθέσει σχόλια (μεγάλη η χάρη σας, δεν συνηθίζω ποτέ να βάζω ελληνικά σχόλια :p) οπότε ελπίζω ότι δεν χρειάζεται να εξηγήσω κάτι παραπάνω. Enjoy

PS: Με κατάλληλη επεξεργασία του παραπάνω κώδικα, μπορείτε να κάνετε όσοι browsers έχουν ήδη ενσωματωμένο αυτό το feature να μην τον εκτελούν, και όσοι δεν τον έχουν να το εκτελούν σωστά. Ωστόσο εμένα δεν μου χρειαζόταν κάτι τέτοιο, οπότε δεν έχω το χρόνο να το κάνω μόνο και μόνο για το blog.