"scroll" does not fire when content is overflow: hidden. "wheel" fires for wheel mouses but not on a magic trackpad or magic mouse. How can I detect the mouse interaction of attempting to scroll in this scenario?
You can get the mouse coordinates and other properties like movement easily.
Using that position you can choose when trigger an wheel event or just make the script to scroll the page.
check this fiddle (not mine) to get inspired
Related
I am working on this AngualarJS app on a touch device and there is a place where I am disabling scrolling through attaching a handler on touchmove. However, I have tested the device and can verify that a touchmove is not necesarrily triggered when the screen scrolls - only touchstart and touchend could just be triggered as well. The trick is to "tap a bit hard on the screen fast with a very slight upward drag motion".
How else could I disable scrolling? Note: I cannot e.preventDefault the touchstart event, as I need it for something else while the scrolling is disabled. Thank you!
In my viewport, disabled scroll have many ways:
e.preventDefault() but this one you don't allow
use CSS
how to make one place begin scroll? there are two doms: scroll-wrapper & scroll-area
scroll-area size bigger than scroll-wrapper
scroll-wrapper has overflow: scroll
So, stop area scroll:
they have the same size
overflow: hidden (touchmove listener change the CSS position can imitate scroll)
Now, you wanna disable the scroll of one area.Maybe you could just use CSS to do this.
Hope I can help you.
I am implementing a scrollbar using jQuery/Javascript/CSS. The usual. Everything is going according to plan except for the following use case:
The user mouses down in the scrollbar div hosting mousedown/mousemove/mouseup event handlers. The user initiates a drag gesture - mousemove starts firing - that soon moves the cursor outside the bounds of the scrollbar div and onto the surrounding div real estate on the web page. The moment this happens, mousemove - as expected - stops firing events.
How do I continue to have mousemove fire events without resorting to just attaching a mousemove handler to the root div? How do I maintain scrollbar dragger translation even though the cursor has wandered off the scrollbar?
Thanks,
Doug
Instead of using onmousemove on the element, use it on the document.
I have a div on which I listen for swipe events using jQuery mobile.
I was wondering how I could get the div to follow and move with the finger from the time that the swipe starts until the time that the swipe ends?
Almost like draggable only while the swipe is happening.
Although I would prefer to not use jQuery UI.
How can I do this properly and in the best way possible?
My method of doing this was on mouse down, set the offset of the div to the x location of the mouse. But that fires every pixel and seem inefficient. Also it happens on mouse-down, not on swipe.
Here is my code that listens for the swipe, in this case swipe right:
$('#main').on('swiperight', '.dataCard', function(event){
event.preventDefault();
// what happens on swipe here
});
Now, how can I get .dataCard to follow the finger as it swipes until the finger is picked up?
Well, you can inspect the event in a breaking in a debugger. Also, you cannot change positions of a "relative" element, it will always be in document flow position (hence why I asked if you had made the element absolute).
I'm searching for a script like Photoswipe that works on desktop on mouse events, simulating swipe gestures.
Photoswipe without thumbnails is perfect - only I want to animate not only images but a whole div!
The first good-looking result was a jQuery plugin called jQuery mouseSwipe.
But this script only moves around a parent div which contains the items visually moved around.
If that is not enough, you should consider writing something for yourself.
Listen to mousedown and mouseup events and check the distance from the startpoint to the endpoint. If it is higher than a threshold you defined, let's say 100 Pixel, go to the next or previous element, based on the direction of the movement.
If you want it to be animated, you should also listen to the mousemove event and move the element around.
http://jsfiddle.net/nicktheandroid/7raYa/9/
My script allows me to scroll the page like a PDF, allowing you to grab the page and drag down or up. My problem, is that when i use the scrollbar, then mouseup from the scroll bar, the scrollbar will stick and scroll with my mouse up and down, even though my mouse is up. So when clicking on the scrollbar, its like i never moused up. how do I fix this?
THANKS!
I believe the scrollbar is part of the page, so when you click it, it makes your script believe the mouse is down - you'll notice that after you mouseup from clicking on the scrollbar that the page continues to move up and down until you click. Try to grab the coordinates of the mouse on mouse down, and make sure that the click occurred inside of the page (minus the scrollbar)
Edit: I was correct - here is the updated jsFiddle with it working: http://jsfiddle.net/xDtVL/