ביטול אירועי עכבר בזמן גלילה

במהלך עבודה על אתר גיליתי שבזמן גלילה יש קפיצות גדולות בצריכת המשאבים וזה גורם לעוס על המחשב. התחלתי לחפש כל מיני פתרונות כדי להקל על הדף ומצאתי אחד שהוא מאוד יעיל ועם זאת מאוד קל לביצוע.

הבעיה יכולה לצוץ בעיקר בדפי אינטרנט ארוכים שבהם הרבה אלמנטים וגלילה לאורך הדף.

בצורה די פשוטה אנחנו יכולים לומר לדף האינטרנט שלא יתייחס לאירועי HOVER בזמן שהדף נגלל, בכל מקרה אנחנו לא צריכים אותם בזמן גלילה, אז למה לתת למחשב לעבוד קשה? באותה מידה אפשר לומר לדפדפן לא להתייחס לארועי HOVER גם במסכי מגע וכו'.

אז איך עושים את זה?

בשלב הראשון נוסיף קלאס לקובץ הCSS שלנו שמבטל את כל אירועי העכבר:

[css]
.disable-hover {
pointer-events: none;
}
[/css]

עכשיו אנחנו צריכים להחיל את הקלאס הזה על האיזור הרצוי בזמן גלילה. כלומר: בזמן גלילה אנחנו רוצים שהBODY שלנו יקבל הוראה להתעלם מאירועי עכבר. נבצע את זה באמצעות קוד JavaScript:

[js]
var body = document.body,
timer;

window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}

timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
[/js]

וזהו, למעשה כעת בזמן גלילה הBODY מקבל את הקלאס ומתעלם מאירועי עכבר. כשהגלילה מסתיימת, הקלאס מוסר ושוב אירועי עכבר חוזרים לתפקד כרגיל.