स्क्रॉल घटना
पुस्तक घटना एफएफ में अजीब तरह से बर्ताव करता है (यह चिकनाई स्क्रॉल की वजह से कई बार एक बहुत सक्रिय किया जाता है), लेकिन यह काम करता है।
नोट: पुस्तक घटना वास्तव में निकाल दिया जाता है जब स्क्रॉल पट्टी खींच, कर्सर कुंजियों या माउसव्हील का उपयोग कर।
//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
padding: "5px 7px",
background: "#e9e9e9",
position: "fixed",
bottom: "15px",
left: "35px"
});
//binds the "scroll" event
$(window).scroll(function (e) {
var target = e.currentTarget,
self = $(target),
scrollTop = window.pageYOffset || target.scrollTop,
lastScrollTop = self.data("lastScrollTop") || 0,
scrollHeight = target.scrollHeight || document.body.scrollHeight,
scrollText = "";
if (scrollTop > lastScrollTop) {
scrollText = "<b>scroll down</b>";
} else {
scrollText = "<b>scroll up</b>";
}
$("#test").html(scrollText +
"<br>innerHeight: " + self.innerHeight() +
"<br>scrollHeight: " + scrollHeight +
"<br>scrollTop: " + scrollTop +
"<br>lastScrollTop: " + lastScrollTop);
if (scrollHeight - scrollTop === self.innerHeight()) {
console.log("► End of scroll");
}
//saves the current scrollTop
self.data("lastScrollTop", scrollTop);
});
पहिया घटना
आप MDN को भी देख सकते हैं, यह व्हील इवेंट के बारे में एक बेहतरीन जानकारी को उजागर करता है ।
नोट: पहिया घटना केवल मूसवेल का उपयोग करते समय निकाल दिया जाता है ; कर्सर कीज़ और स्क्रॉल बार को खींचने से ईवेंट आग नहीं लगती।
मैंने दस्तावेज़ और उदाहरण पढ़ा: ब्राउज़र में इस घटना को सुनकर
और एफएफ, आईई, क्रोम, सफारी के साथ कुछ परीक्षणों के बाद, मैं इस स्निपेट के साथ समाप्त हुआ:
//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
padding: "5px 7px",
background: "#e9e9e9",
position: "fixed",
bottom: "15px",
left: "15px"
});
//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
var evt = e.originalEvent || e;
//this is what really matters
var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
scrollText = "";
if (deltaY > 0) {
scrollText = "<b>scroll down</b>";
} else {
scrollText = "<b>scroll up</b>";
}
//console.log("Event: ", evt);
$("#test").html(scrollText +
"<br>clientHeight: " + this.clientHeight +
"<br>scrollHeight: " + this.scrollHeight +
"<br>scrollTop: " + scrollTop +
"<br>deltaY: " + deltaY);
});
