i'm trying to use this code to get scrolling direction the problem is when scroll up the detection is not going well
$(window).bind('DOMMouseScroll scroll mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
});
});
Here's a screen capture of the result enter image description here it shows scroll up then scroll down but i'm not scrolling down
You have way too many events bound.
Try this code, the only difference is that I use it on a div.
$('div').bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
}
});
Here is a working JS fiddle:
https://jsfiddle.net/r1sjv2tv/
Edit: The above answer works, albeit only when using wheel scroll.
However, the window can also be scrolled with mouse. If you to handle it as well, it will get a bit more complex.
I have made a solution that listens to onscroll event and simply compares the current scrolltop position with the last scrolltop position to determine the direction of a scroll.
$('div').bind('scroll', function(event) {
if ($(this).scrollTop() < $(this).data('last-scroll')) {
console.log('scroll up');
} else {
console.log('scroll down');
}
$(this).data('last-scroll',$(this).scrollTop());
});
This works independent of the original event trigger.
Please see the fiddle:
https://jsfiddle.net/r1sjv2tv/2/
Related
I'm trying to trigger a function when the mouse wheel is spun, however the div is the height of the window, therefor isn't scrollable and isn't triggering my function. This is the code I am using to test if it works;
jQuery(document).ready(function($) {
$( document ).scroll(function () {
console.log('it works!');
});
});
You can see the full fiddle here; https://jsfiddle.net/8wr8p4ub/1/
If I change the height to an exact value, it triggers, however how can I achieve this when the element isn't scrollable?
You have to check with mousewheel event here and not document scroll. Since in your case document is not scrolling.
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
console.log("scroll up");
}
else {
// scroll down
console.log("scroll down");
}
});
* {
padding: 0;
margin: 0;
}
.hi {
height: 100vh; // Change to 1200px and see the output in the console.
width: auto;
background: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hi"></div>
You don't need to bother yourself about the scroll once the page content is not so long to bring it out. But from what i saw there, your code is fine, and it will work whenever the content exceeds the minimum page scroll
Better still, you can make use of the mousewheel event in JS
You need to use mousewheel event handler:
$('div').on('mousewheel', function(event){
if(event.originalEvent.wheelDelta / 120 > 0) {
console.log('scrolled up');
} else {
console.log('scrolled down');
}
});
I am using a fullpage.js plugin and would like to transition the menu from the footer to the header once the user scrolls past the first slide.
On this Page:
However the full screen functionality is not allowing me to check when there is a scroll event.
I have written this:
$(window).scroll(function(){
if ($(window).scrollTop() > $('.topDiv').position().top) {
console.log('div hits top!');
}
});
To check if the top grey div is at the top of the window, but it does not work.
Even:
$(window).scroll(function(){ console.log('scrolling'); });
is not working.
I think the best way to implement the desired feature is to use the callbackd provided by fullPage.js instead of relying to $(window).scroll()
You can have a custom function called on each of this callback:
onLeave: function(index, nextIndex, direction){}
afterLoad: function(anchorLink, index){}
Then you can check the index, and nextIndex value to perform the desired logic.
Hope that helps.
May be this will help
$('elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});
Animation on scroll function is working fine on desktop view but it mess up the scrolling and scroll to random sections when I switch to mobile view and uses touch to scroll the screen. This is my animate on scroll function :
$(window).scroll(function() {
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
});
If I use the windows on scroll function, it mess up the mobile view. Please help to solve this issue so that animate on scroll can work on both mobile view with touch scroll and desktop view without messing the scroll.
For more Information these are the other scroll events:
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 54)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '#mainNav',
offset: 80
});
// Closes the Responsive Menu on Menu Item Click
$('#navbarResponsive>ul>li>a').click(function() {
$('#navbarResponsive').collapse('hide');
});
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
});
})(jQuery); // End of use strict
EDIT
Since this is the same function for both events...
Maybe calling it on the same handler and use an or to trigger only once will do the trick.
$(window).on("touchmove scroll", function(e) {
// Do the function on ONLY ONE of the two event.
if(e.type=="touchmove" || e.type=="scroll"){
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').not(".triggered").addClass("triggered").animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
}
});
EDIT
I've added a subtility using a triggered class.
.not(".triggered").addClass("triggered")
One the first iteration of the .each() function, none of the skillbar-bar has the trigered class.
So let's add it! Then trigger the animation.
On the second and all next iterations, the triggered class removes all skillbar-bar which already have the triggered class out of the collection.
This prevent the animate() function to be fired more than once on each skillbar-bar.
I think this was the issue.
Let me know if it works !
My Problem is this:
I have a MouseWheel Event (from plugin: https://github.com/brandonaaron/jquery-mousewheel) that triggers a function:
$(document).on('mousewheel', onMouseWheel);
function onMouseWheel(event,delta)
{ Code... }
I Also have a Scroll Event that triggers another function:
$(document).on('scroll', onScroll);
function onScroll()
{ Code... }
However when using the mouswheel, both events are triggered and so both functions run, which I don't want them to. They have to be separate since using the mousewheel and dragging the scrollbar should give separate results. The problem only occurs that way around ie. the mousewheel function is not triggered by dragging the scrollbar.
EDIT:
I've realized with a little help, that the problem occurs because I use ScrollLeft() inside my mousewheel function, which of course causes the scroll event.
I've tried to think of a solution but with no luck. Can anyone help? Thanks!
EDIT: More code:
$(document).on('scroll', onScroll );
function onScroll()
{
code...
}
$(document).on('mousewheel', onMouseWheel ) );
function onMouseWheel(event,delta)
{
event.preventDefault();
if(delta<0)
{
detectDown();
}
else if(delta>0)
{
detectUp();
}
return false;
}
$(document).on("keydown", onKeyDown);
function onKeyDown(e)
{
event.preventDefault();
if (e.keyCode == 37)
{
detectUp();
}
else if (e.keyCode == 39)
{
detectDown();
}
}
function detectUp()
{
$("html, body").animate({scrollLeft:(currentElement.prev().position().left - 100)}, 800, 'easeOutQuad');
currentElement = currentElement.prev();
}
function detectDown()
{
$("html, body").animate({scrollLeft:(currentElement.next().position().left - 100)}, 800, 'easeOutQuad');
}
Maybe this helps?
Add return false at the end of the onMouseWheel function.
function onMouseWheel(event, delta) {
// code
return false;
}
This will disable the default scroll action for the 'mousewheel' event, hence the 'scroll' event will not be triggered.
fiddle
I've come to the realization, that the best solution is to make a custom scrollbar. This way we can avoid calling the scrolling function and having the different types of scrolling interfering with one another.
how can I trigger two mouse events simultanious (hold right clic and mouse weel) I have to press the right button of the mouse and hold on and at the same time I roll the wheel
$("selector").bind("click mousewheel", (function(event, delta) {
console.log("xxx")});
This may be not exactly you want but it works...
Fiddle here
var rightButtonDown = false;
$(document).mousedown(function (e) {
if (e.which === 3) rightButtonDown = true;
});
$(document).mouseup(function (e) {
if (e.which === 3) rightButtonDown = false;
});
$(document).mousewheel(function (event, delta, deltaX, deltaY) {
if (rightButtonDown) {
console.log("fire!")
}
});
Include a jQuery plugin to handle the mousewheel event.
Try this demo http://jsfiddle.net/HeDPZ/
Try event mousedown for any kind of click i.e. right or left.
Behavior - with the mouse click of when you move wheel you will see an alert poping.
Another thing is there is a small syntax error in your closing brackets.
For OP: Do you mind telling us bit more as to what kind of functioanlity you are aiming for just so that we can help you out in more detail.
Captureing event like this http://jsfiddle.net/dQWNY/ more here: Detect middle button click (scroll button) with jQuery
Left - 1
Middle - 2
Right - 3
I hope this is fits your need :)
Code
$(".vendor-icon").bind("mousedown mousewheel", function (event, delta) {
alert("xxx");
});
Associated html