Develop Reference

Detect scrolling attempts in overflow:hidden page?

I want to detect when the user is trying to scroll up or down on my page, but since I don't want to allow the actual scrolling I have set an overflow:hidden body. The code is something like this:
$('html,body').css('overflow','hidden');
$(window).scroll(function(event){
console.log("scroll");
});
The problem is that since there is no actual scrolling I cannot fire the event, I have thought about removing the overflow style and somehow preventing scrolls but I cannot figure out how to do it.
Anyway is there a way to fix the scrolling while detecting scrolling attempts? Thanks

Try using jQuery mousewheel https://github.com/brandonaaron/jquery-mousewheel. You can detect the mousewheel movement. The other option is to not set the overflow to hidden but instead catch the scroll attempt and scroll them yourself. There are also a bunch of libraries for JS scrolling, I like http://manos.malihu.gr/jquery-custom-content-scroller/.

Here's a jQuery-solution.
$(document).bind('mousewheel', function(e) {
var delta = e.originalEvent.wheelDelta;
console.log('The mouse delta is : ' + delta);
});
jQuery Doc - .bind()

With javascript / query, is there a way to just "nudge" or "flick" the scroll so it's interruptible by the user (better description within)

I want some js to automatically scroll just a slight bit down the page, however I also want this scroll to be interruptible by the user.
When using jquery to auto scroll, when you animate the scroll with .animate and then the user starts scrolling while the animation scroll is still going they interact with each other and create a strange jumping effect.
Is there a way to make so when the user scroll during a javascript scroll it just stop the javascript scroll?

It can't be done since you can't know if the end-user scrolled or you scrolled the page via javascript.
A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.
Docs
What I tried to do but failed because the above:
// callback for the scroll event
$(document.body).scroll(function(){
// Stop the scrolling!
$('html, body').stop();
});
A not working demo...

The other users answer is actually incorrect, it is possible and has been answered before:
How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
Check the answer
"$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
$("html,body").stop();
}
})"
I've updated the previous users JS Fiddle to work with the proposed solution and it works perfectly.
http://jsfiddle.net/Lwvba/7/

javascript bind an event handler to horizontal scroll

Is there a way in javascript to bind an event handler to a horizontal scroll as opposed to the generic scroll event which is fired when the user scrolls horizontally and vertically? I want to trigger an event only when the user scrolls horizontally.
I searched around for an answer to this question, but couldn't seem to find anything.
Thanks!
P.S. My apologies if I'm using some terminology incorrectly. I'm fairly new to javascript.
UPDATE
Thanks so much for all your answers! In summary, it looks like you are all saying that this isn't supported in javascript, but I that I can accomplish the functionality with something like this (using jQuery) (jsFiddle):
var oldScrollTop = $(window).scrollTop();
$(window).bind('scroll', function () {
if (oldScrollTop == $(window).scrollTop())
//scrolled horizontally
else {
//scrolled vertically
oldScrollTop = $(window).scrollTop();
}
});​
That's all I needed to know. Thanks again!

Answering from my phone, so unable to provide code at the moment.
What you'll need to do is subscribe to the scroll event. There isn't a specific one for vertical/horizontal.
Next, you'll need to get some measurements about the current display area. You'll need to measure the window.clientHeight and window.clientWidth.
Next, get window.top and window.left. This will tell you where position of the viewport is, ie if it's greater than 0 then scroll bars have been used.
It's pretty simple math from here to get what you need. If no one else has provided a code example in the next few hours I'll try to do so.
Edit:
A bit further information.
You must capture the scroll event. You also need to store the initial window.top and window.left properties somewhere. Whenever the scroll event happens, do a simple check to see if the current top/left values differ from the stores value.
At this point, if either are different you can trigger your own custom events to indicate vertical or horizontal scrolling. If you are using jQuery, this is very easy. If you are writing js without library assistance, it's easy too but a little more involved.
Do some searches for event dispatching in js.
You can then write any other code you want to subscribe to your custom events without needing to tie them together with method calls.

I wrote a jQuery plugin for you that lets you attach functions to the scrollh event.
See it in action at jsfiddle.net.
/* Enable "scrollh" event jQuery plugin */
(function ($) {
$.fn.enableHScroll = function() {
function handler(el) {
var lastPos = el
.on('scroll', function() {
var newPos = $(this).scrollLeft();
if (newPos !== lastPos) {
$(this).trigger('scrollh', newPos - lastPos);
lastPos = newPos;
}
})
.scrollLeft();
}
return this.each(function() {
var el = $(this);
if (!el.data('hScrollEnabled')) {
el.data('hScrollEnabled', true);
handler(el);
}
});
}
}(jQuery));
It's this easy to use:
$('#container')
.enableHScroll()
.on('scrollh', function(obj, offset) {
$('#info').val(offset);
});
Please note that scroll events come very fast. Even if you click in the scrollbar to jump to a new position, many scroll events are generated. You may want to adjust this code to wait a short time and accumulate all the changes in position during that time before firing the hscroll event.

You can use the same scroll event, but within your handler use the scrollLeft function to see if the scrollbar moved horizontally from the last time the event was fired. If the scrollbar did not move then just return from your handler. Otherwise update your variable to the new position and take action.

You can check if the the x value of the page changes and ignore your y value.
If the x value changes: There is your horizontal scroll.

With page-load, store the initial scrollbar positions for both in two variables (presumably both will be 0). Next, whenever a scroll event occurs, find the scrollleft and scrolltop properties. If the scrollleft property's value is different and scrolltop's value is same as compared to their earlier values, that's a horizontal scroll. Then set the values of the variables to the new scroll values.

No, there is no special event for scroll horizontal (it is for global scroll), but you can try to check the position of content by property .scrollLeft and if it's different from the previous value it means that the user scrolled content horizontally.

capture scroll in inner div

What I am trying to achieve is this, imagine you have a tall page with several divs in it.
The tall page itself is scrollable, the divs as well.
What I want to achieve is to prevent scrolling the whole page when scrolling the divs to the limit.
What now happens is that when you reach the end of the div by scrolling ferociously you start scrolling the entire page. I want to prevent scrolling the entire page, as this is for a private project and the items in the bottom rarely get used.
The divs are not generated dynamically so I can hardcode everything.
If it is possible I would really like to avoid using jQuery, cause that seems a bit overkill in this case.
//edit:
A small example can be found at http://gnur.nl/demo.html
The intended behavior of this demo is that the entire page never scrolls when you are scrolling inside the bacon div.

I'm afraid it's a lost battle, the scroll event doesn't look to be cancelable:
http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll
Or may be with a desperate hack to scroll back the amount of pixel that were scrolled:
var lastPos = isNaN(window.pageYOffset) ?
document.documentElement.scrollTop :
window.pageYOffset;
window.onscroll = function(ev){
var diff = (isNaN(window.pageYOffset) ?
document.documentElement.scrollTop :
window.pageYOffset) - lastPos;
window.scrollBy(0, -diff);
};
And using onmouseover and onmouseout over the DIVs to prevent it or not.

(jQuery) Scroll event.. I want to scroll the document to the point specified if the user scroll the page

I want to implement a scroll function.. So the default of scroll is disabled. And if the user use the scroll button, I want it to be set to the point I want.. How can I implement this function? window.scrollTop is not working.. I tried a lot of different methods but all were not working..
$(window).scroll(function () {
$(body).scrollTop = 3000px;
})

The scrollTop property only accepts an integer (not pixels). Omit the px and it should be fine.
$(window).scroll(function() {
$('body').get(0).scrollTop = 3000; // note that this does only work if body has overflow
// if it hasn't, use window instead
});

There is a plugin for JQuery called ScrollTo that might do exactly what you need.
Check it out here: http://plugins.jquery.com/project/ScrollTo