I'm facing an issue. For a project I'm doing I'm detecting the scrollwheel position and based on that I'm navigating to the next slide or not. A problem is, however, that some Mac users use "natural scroll" - inverting their scrolling on pages. This means that, for those users, I should use scroll in the other direction as trigger.
My question is; is there a way to detect in what direction the user is used to scroll? My initial idea was to track scrolling and see how scrollTop and scrollwheel relate to each other (i.e., I record mousewheel events and see which direction the page scrolls as a result). That, however, requires the user to scroll before I know what to do. Which doesn't work, as users first need to trigger a slide change.
I'm at a loss. All help is appreciated.
There's actually an easy answer, as long the Mac users are using Safari--
function myWheelEventHandler(event) {
var deltaY = -event.wheelDeltaY;
if (event.webkitDirectionInvertedFromDevice) deltaY = -deltaY;
// use value for something
}
In this example, the value of deltaY will be positive when the user rolls the mouse wheel away from them (or the trackpad equivalent), and negative otherwise, regardless of the system-wide "natural" scroll setting.
In other words, if the webkitDirectionInvertedFromDevice property is present and has the value true, then you can be sure "natural" scrolling is enabled. It even updates if the setting changes while your script is running. The property is available for wheel events only (not scroll events).
If the property is not present, or is present but has the value "false" (which will always be the case in Chrome, due to a bug), then unfortunately you don't know if the scroll direction is reversed or not.
Your idea of testing to see how the page moves on wheel events may be the most robust solution. You could create an invisible (empty) div in front of your slideshow, set to overflow:scroll, with a taller empty div inside it. The first time you receive a wheel event on this div, you could then work out the scroll direction and trigger the appropriate slide change.
Related
Im learning javascript and jquery and im trying to create my own carousel.
The current problem i have stumbled over is the following. When the user stop scrolling in the carousel, i have a function that runs and centers my targeted Carousel item to my desired point. I have illustrated this with a black line in my fiddle. Here is my function that centers that item:
jQuery.fn.CenterToPoint = function(){
return this.each(function(){
Offset = $(this).offset().left;
Width = $(this).width();
Illuminate_Point = 0.45 * $(window).width();
ScrollLeft = Illuminate_Point - (Offset+Width/2);
$Container.animate({scrollLeft: "-=" + ScrollLeft},450);
});
}
However, i want the user to be able to scroll even though the animation is running. How can i kill this animation when its running but the user either clicks, mousescroll or trackpad is used on my carousel?
Here is my jFiddle:
http://jsfiddle.net/ptp05jvo/
From what I understand, your problem are:
The box is twitching after the it reach to desired point (black line).
When animating (box moving towards the black line), user input will cause box to 'jump'. In this case, you would want user input to override animating scrolling.
I didn't solve the whole problem, but here's what I've got so far: http://jsfiddle.net/ptp05jvo/3/
I managed to stop the first problem (twitching) by adding the following option in .animate().
always: function() {
clearTimeout($Container.data('scrollTimeout'));
isSystemScroll = false;
}
When you animate with .animate() to scroll, jQuery scroll the element and it's considered as actually scrolling, so .scroll() event is triggered. This can be good / bad.
In your carousel case, it's sort of bad because you .CenterToPoint() is called within .scroll() event which means it will be called every time jQuery animate the box to center.
This is what causing the twitching problem. The .CenterToPoint() keeps getting called within `.scroll()' event. So, the option I added will stop this.
To separate the concern, I added new jQuery function, scrollStopped to handle scrolling stopped event.
There is also a new variable called isSystemScroll that I introduced to the code. The idea is to recognize whether the scroll is coming from user / animation. With this, we can prioritize user input to override animation scroll.
However, user input can be anything, keyboard arrow, mouse wheel scroll, mouse click on scroll bar, etc. In my example, I only handle keyboard arrow input which is shown in the following code:
$(document).keyup(function () {
isSystemScroll = false;
console.log("key up");
});
Obviously, you can add additional check to only capture left / right arrow keys instead of all keys.
This sort of solve the 2nd problem. But you still need to handle other user inputs, esp mouse moving scroll bar.
From the test, I found that Firefox render the animation better and smoother. In Firefox, user input with keyboard arrow will override animation perfectly. The transition is smooth between the two. However, in Chrome, there's a little bit lag / jump.
Also, in Chrome, horizontal scroll bar doesn't show up while in Firefox, it does.
It's worth to mention that Firefox doesn't show twitching problem. I can't be sure if this is caused by the CSS you have. I didn't modify your CSS.
I came across couple carousel library and did the same test to see how they handle the issue.
Owl Carousel
http://owlgraphic.com/owlcarousel/demos/custom.html
Only allows dragging input. Other user inputs are disabled (scroll bar, keyboard arrow, etc). However, if you try to drag the carousel (in Chrome browser) while it's animating, you will see same jump / lag problem. Again, Firefox shows better and smoother animation with this library.
Slick
http://kenwheeler.github.io/slick/
The 'autoplay' option prevents user input when carousel is animating. No scroll bar and you can only move with keyboard arrow.
Conclusion
As a conclusion from this long answer, few things you can do if you want to build your own carousel:
Limit user input, only allows certain input.
Disable scroll bar.
Or, you can use existing library out there.
So. I'm making a page with buttons; clicking the buttons smoothly scrolls the page (actually a container) to anchors located further right. This is done with container.scrollLeft.
Now I'm trying to make it so that when the user scrolls manually (scrollbar, mousewheel, arrow keys etc), the automated smooth scrolling instantly stops.
I've tried doing this with container.addEventListener('scroll',StopScroll,false); but this fires up for any scroll, even done through code, not just done by the user.
Is there a way to detect only user scrolling ? Or maybe a work-around ?
Also, I'd rather not use Jquery, but I'll switch to it if it's the only way.
I've got a feeling that DOM scrolling and event scrolling are managed the same way, and therefore indistinguishable.
However, you might hook into mousedown/keydown and update a variable when a key or mouse button is held, and only perform scrollStop if that variable is set?
I'm building a web app that has a grid of many small scrollable divs (actually, Ace editors), and this grid has enough elements that it is larger than the window. When a user begins scrolling over empty space, I want them to be scrolling the window itself; when a user begins scrolling inside a grid element, I want them to scroll the div contents there. The thing is, if a user begins scrolling over empty space, and then scrolls such that their mouse goes over a grid element, that scrollable div captures all the scrolling events, interrupting the user's flow over the grid and "trapping" them inside the grid element.
I can't manually capture onmousewheel events, since AFAIK there's no way to capture horizontal mouse wheel movement separately from vertical, and I want users on Mac OS X to be able to scroll in all directions. I've thought about using JS to add an invisible div with a very high z-index on the first onscroll event, and removing it as soon as onscroll events aren't triggered for a certain period of time. Haven't yet coded this up, but I'm wondering if there's a better solution, or if there are any potential pitfalls that I haven't thought of. Any help or advice would be great! Thanks!
I think a solution for this would be incredibly difficult due to browser support, and the actual solution, which would probably be something like calculating the scroll, backtracking the div, and applying the scroll to the page.
You could do something like this:
$('div').scroll(function(e){
// figure out how much it has scrolled
window.scrollBy(0,howmuch);
});
I don't recommend this solution in the slightest though, I think the better option would be to set the divs to overflow:hidden; and pick up a solid scroll plugin, and use that to customize the scroll behavior on the divs.
Good day. I got an HTML page which is small and has no scroll bar. However i need to determine when and what direction scroller was moved. So i need to determine scroll button on my mouse is moving.
How can i do it?
Check out the jQuery Mousewheel plugin. Then you can simply bind an event to any element to check if the wheel was used while the mouse was over it.
$('body').mousewheel(function(delta){
// Do stuff
});
Note that it's not too user friendly to not have a scrollbar and rely only on the mousewheel. There are other ways people expect to be able to scroll, like the arrow keys for example.
Is there a beforeScroll event in jQuery? Or can this type of event be replicated at all?
We have a scenario where we need perform an event before a div with overflow:scroll has been scrolled. The problem with using the .scroll event is that this is raised after the div has been scrolled rather than before.
No, there's no such event. The scroll event cannot be cancelled (for obvious reasons) and I would speculate that it fires after the action so that the scrollTop and scrollLeft properties are accurate when accessed.
Possible workarounds might be to capture the mousewheel/DOMMouseScroll events and the keydown events for page up, page down, up, down, etc. keys. There's no 100% method, though - you'll never be able to stop the user from interacting with the browser's scrollbar components. The only true solution there is to roll your own scrollbars.
If you're just looking to find the amount the user scrolled, you could set a timer to store the current scrollLeft/scrollTop in a variable and then check them vs the new values in the scroll event.
I solved this in a crude way that turned out to be surprisingly un-laggy:
I update the position myself after checking that the position is within the range that I want, using position=fixed, and alter the top value.