Develop Reference

Javascript mousewheel vs scrolbar scroll event

Is there a (reliable) way to distinguish between scroll event initiated by mousewheel versus when user uses browser scrollbar or scrolls by touch? If I add this event I get true in both cases.
document.on('scroll', function(){
});

You could detect the mouse wheel:
Answer equivalent:
- Mousewheel event in modern browsers
- List item
window.addEventListener("wheel", event => console.info(event.deltaY));

get scroll event in javascript with full height page

I have a page that is set to height: 100vh
Now I want a function to be triggered when the user tries to scroll. onScroll doesn't work since it is impossible to scroll. How can I still get the onscroll event?
If it is any helpful, here is the pen
https://codepen.io/Sinanski/pen/wEbeMo?editors=0110

The wheel event might help you - although this won't trigger on scroll events from the keyboard. So you might put together something like this:
window.addEventListener("wheel", onScroll);
window.addEventListener("keyup", onKeyUp);
function onScroll(event) {
console.log("scroll")
}
function onKeyUp(event){
if(event.key == "ArrowUp" || event.key == "ArrowDown"){
onScroll(event);
}
}
Please note browser support for this event from the MDN page and test appropriately according to your needs.
Updated pen https://codepen.io/anon/pen/QVRxed?editors=0010

By definition, no scroll events will get fired if nothing can be scrolled.

hammer.js - preventing drag event until previous event ended

I have a simple photo gallery that change image on drag event, I'm having a problem with iOS7 browser, when dragging right or left the drag event is triggered too many times. I tried to add a global variable that tells if the previous event was not ended but I couldn't get it work, I also tried some of hammer.js options but no luck. any idea?
$picWrapper.hammer({}).on("dragright", function(event) {
event.preventDefault();
PhotoGallery.Browse.next();
}).on("dragleft", function(event){
event.preventDefault();
PhotoGallery.Browse.prev();
});

Try using swiperight and swipeleft instead, and event.gesture.preventDefault();

scroll event by amount?

I'm currently using a something like this to do stuff on ready and on the scroll event. But I really only need to do stuff each time the page scrolls a full length (window height) and not refire it for every little bitsy scroll. Is there a way to do that using jQuery or native JavaScript?
$(document).ready(function() {
$(window).scroll(function() {
// do stuff
}).scroll(); // Trigger scroll handlers.
});

You can't really fire an event without listening for it, but you can use jQuery's scrollTop() to see if the page is scrolled the same amount as the window height, but it will have to be checked on a certain event, like the scroll event, something like this:
$(window).on('scroll', function() {
if ($(this).scrollTop() > $(window).height()) {
alert("scrolled more than window height");
}
});

There isn't any way to only trigger the scroll at certain points on the page, you'll need to check it everytime... but you might want to consider throttling or debouncing the event.

How to distinguish scrolling by mouse from scrolling programmatically in JavaScript?

I am scrolling an overflowing DIV's content by changing the scrollLeft property in Javascript:
setInterval(function(){
$('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
}, 50);
However, I want to stop this as soon as the user scrolls the content themselves, using the mouse. I tried to detect this using the scroll event
$('#scrollbox').scroll(function(){...});
however, my automatic scrolling above also triggers that event. How can I distinguish this and only react to user-initiated scrolling? (or: how can I stop the above code from firing a scroll event? That would also do the trick)

You could use the .hover(): function to stop the scrolling when the mouse is over the scrollbox element:
http://jsfiddle.net/bGHAH/1/
setInterval(function(){
if(!mouseover)
{
$('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
}
}, 50);
var mouseover = false;
$('#scrollbox').hover(function(){
mouseover = true;
},function(){
mouseover = false;
});
Edit
Based on your comments I managed to find a jquery plugin from the following site: special scroll events for jquery.
This plugin contains an event which attempts to determine whether scrolling has stopped based on the period of time that has elapsed between the last scroll step and the time the check was made.
To get this to work I needed to slow your interval to just over the latency used by the plugin which worked out to be 310 milliseconds. Doing this meant I had to increase the scroll step to keep it visibly moving.
Here is the link:
http://jsfiddle.net/EWACn/1/
and here is the code:
var stopAutoScroll = false;
$(document).ready(function(){
setInterval(function(){
if(!stopAutoScroll)
{
$('#status').html('scrolling');
$('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+10);
}else{
$('#status').html('not scrolling');
}
}, 310);
$('#scrollbox').bind('scrollstart', function(e){
stopAutoScroll = true;
});
$('#scrollbox').bind('scrollstop', function(e){
stopAutoScroll = false;
});
});
Hope this helps.

For FF (Mozilla):
document.addEventListener('DOMMouseScroll', handler, false);
For IE, Opera and Chrome:
document.onmousewheel = handler;

Another option is to have an external flag that you can set prior to the programmatic scrolling, and then reset afterwords. If the scroll event is fired and this flag isn't set you know that the user is responsible and can act accordingly.
Unfortunately while this is browser independent and easy to read it could lead you to believe that some user scrolls are programmatic ones. However I would think the occurrences of this is small and may be worth it depending on the app you are writing.

Try wheel event, for most modern browsers
The wheel event is fired when a wheel button of a pointing device (usually a mouse) is rotated.