Binding the scroll to a click event
I have buttons downArrow
and upArrow
on my page to control scrolling.
When you scroll down at the bottom of the page, the down arrow disappears; and the up arrow disappears when scrolling up. Everything works perfectly.
Question:
How do I bind my mouse wheel to my function click
? Therefore, if the user scrolls the mouse wheel, the arrows disappear accordingly.
$('#downArrow').on('click', function () { //how to bind mouse scroll?
//scroll down
});
source to share
You can check website scrolling and fire click
button event downArrow
and upArrow
depending on scroll value. This will work.
Check website scrolling:
// We get the $(document) —or $(window)—, because we want to check the scroll of the website.
var $body = $(document), oldScrollValue = 0;
$body.on('scroll', function() {
if ($body.scrollTop() > oldScrollValue ) {
$('#downArrow').trigger('click');
}else{
$('#upArrow').trigger('click');
}
oldScrollValue = $body.scrollTop();
});
JSFiddle: http://jsfiddle.net/tomloprod/has67o9r/
Check element scrolling:
// We get the `$("#divID")`, because we want to check the scroll of this element.
var $element = $("#divID"), oldScrollValue = 0;
$element.on('scroll', function() {
if ($element.scrollTop() > oldScrollValue ) {
$('#downArrow').trigger('click');
}else{
$('#upArrow').trigger('click');
}
oldScrollValue = $element.scrollTop();
});
Don't forget to add code CSS
like this, or the scrolling will be from the document:
#divID{
overflow:scroll;
height:200px;
}
JSFiddle: http://jsfiddle.net/tomloprod/has67o9r/1/
ACLARATION:
I like to add " $ " before the name of variables that contain jQuery objects; so I can easily distinguish from DOM objects.
source to share