স্ক্রোল ইভেন্ট
স্ক্রল ঘটনা মুক্তিযোদ্ধা মধ্যে অদ্ভুত আচরণ করবে (এটা স্নিগ্ধতা স্ক্রলিং কারণে বার অনেক বহিস্কার করা হয়) কিন্তু এটি কাজ করে।
নোট: স্ক্রল ঘটনা আসলে বহিস্কার করা হয় যখন স্ক্রল বার টেনে, কার্সার কীর বা mousewheel ব্যবহার করে।
//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);
});
চাকা ইভেন্ট
আপনি এমডিএন একবার দেখে নিতে পারেন, এটি হুইল ইভেন্ট সম্পর্কিত দুর্দান্ত তথ্য প্রকাশ করে ।
দ্রষ্টব্য: হুইল ইভেন্টটি কেবল মাউস- হুইল ব্যবহার করার সময় নিক্ষেপ করা হবে ; কার্সার কী এবং স্ক্রোল বারটি টেনে তোলা ঘটনাকে দমন করে না।
আমি দস্তাবেজ এবং উদাহরণটি পড়ছি: ব্রাউজার জুড়ে এই ইভেন্টটি শুনছি
এবং এফএফ, আইই, ক্রোম, সাফারি দিয়ে কিছু পরীক্ষার পরে, আমি এই স্নিপেটটি দিয়ে শেষ করেছি:
//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);
});
