Detect scrolling attempts in overflow:hidden page? - javascript

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()

Related

I want to scroll use only button on scrollify

I'm using a scroll animation through the "scrollify".
i want limit any scroll function.
i want to scroll only use button click scrolling, but not use touch scroll and mouse scroll.
if it's hard, expedient also good. Is there aother way?
I think touch events are currently not supported. But for the mousewheel you could do:
JQuery:
$('body').bind("mousewheel", function() {
return false;
});

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.

Is there a way to set the window's scroll position without using scroll() or scrollTo()?

...the reason I ask is that Safari has a bug in its implementation of scroll() that is breaking my UI.
Imagine a page:
<body>
<div id="huge" style="width: 4000px; height: 4000px;"></div>
</body>
...so that you get both horizontal and vertical scrollbars. Now, normally when you press the scrollbar, the page scrolls (vertically). For the purposes of our fancy UI we don't want that to happen, so we squash the keyDown event:
window.onkeydown = function(e) {
if(e.keyCode == 32)
{
return false;
}
};
This works great...unless we decide that instead of preventing scrolling altogether, we want our own, custom scrolling behavior:
window.onkeydown = function(e) {
if(e.keyCode == 32)
{
window.scroll(foo, bar); // Causes odd behavior in Safari
return false;
}
};
In other browsers (Chrome, Firefox), this will instantaneously move the window's scroll position to the desired coordinates. But in Safari this causes the window to animate to the desired scroll position, similar to the scrolling animation that takes place if you press the space bar.
Note that if you trigger this scroll off of any key OTHER than the space bar, the animation does not take place; the window scrolls instantly as in other browsers.
If you happen to be scrolling, say, 1000 pixels or more, then the animated scroll can induce some serious discomfort.
I'm scratching my head trying to find a way around this. I suspect that there isn't one, but I'm hoping some God of Javascript here can suggest something. I'd really like to be able to use the space bar for this command.
If you know where in the document you want to scroll to then you can simply use named anchors. Setting document.location to the anchor (e.g. #top, #div50 or whatever) should be very reliable.
Use document.documentElement.scrollTop = ... (and document.body in some browsers).

(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

Categories

Resources