I need to trigger swipe programmatically like on below gif example
I looked in chrome devtools and this swipe calls 3 events: touchstart, touchmove, touchend so probably I need somehow trigger these 3 events to reach such result. Any ideas?
If you are looking to smoothly scroll the page, you can use element.scroll() and set top to how many pixels from the top you want it to scroll by.
element.scroll({ top: 100, behavior: "smooth" });
Related
I'm trying to implement a new feature on my site, namely moving between form pages using the mouse wheel. I tried to use event "wheel" which perfectly works on desktop, however does not trigger on mobile (iphone - Safari and Chrome). I assume the mobile APIs of these browsers just do not support it, so I'm curious how to trigger it somehow.
I've tried wheel event and mousewheel as well - neither works. I'm listening along with "wheel" the event "scroll" to prevent change form pages if scroll does not reach top or bottom of the page. As I said desktop - perfect, mobile (iphone) - does not work at all.
On mobile you should listen to touch events, either touchend (if you want to move pages once the "scroll" motion is done) or touchmove (if you want to move pages during the scroll). Either way, in your event callback you can calculate if you're at the bottom of the page and then react accordingly:
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// at bottom of page
}
I am building a user interface for a web app.
The structure is something like this.
$("#scroll-down").on("click", function() {
thumbnails.stop(true, true).animate({
scrollTop: '+=300'
}, 100);
I'm using two scroll buttons to scroll up and down a div, because the items in the div are draggable, and if you try to scroll by swiping it just picks up a thumbnail instead of scrolling.
The approach I'm using works perfectly on the desktop and on android.
On iOS (specifically iPad with chrome or safari) i have this weird problem that when the user is inpatient and taps fast multiple times on the scroll buttons, the scroll doesn't work responsively (ie: 10 taps on the down button don't take you to the bottom). Almost like the stop() doesn't work.
Any ideeas / suggestions?
Thank you!
Ok i figured out the answer and its kind of silly, I had the event listener for click (tap in case of iPad). When rapid clicking on desktop it would work - chrome took them as multiple clicks. But when rapid tapping on iPad - iOS (or Safari) took them as double taps, so they wouldn't trigger my events properly. Made the listener to be for 'click dblclick' and that solved the issue.
Here it is for other people who might find themselves in the same situation:
$("#scroll-down").on("click dblclick", function() {
thumbnails.stop(true, true).animate({
scrollTop: '+=300'
}, 100);
I'm doing a simple image gallery with iScroll 5.
Basically I have only 5 images that I can scroll.
If I use clicks and touch (on iPad) works great.
My problem is with trackpads.
So if I try to scroll with trackpad, the scroll jumps from the first image to the last one.
Is there any way I can change the speed of the trackpad?
I'll like not do disable.
Thanks
I think trackpad uses the mouse wheel event, so you can try setting that speed. Try something lower than the default 20.
var scroll = new IScroll('#wrapper', {
mouseWheelSpeed: 20 // the default speed
});
Resource: http://iscrolljs.com/#configuring
did you enable "snap" option?
In that case, the scroll may fire snap action and jump to the bottom (depending on your page or snap settings).
You can adjust the scroll speed by adding snapSpeed option.
Hope it would work.
Ref: Related thread on Github.
In the site I am building, there is an effect where the top navigation "unlocks" from being a fixed element when you scroll past a certain point. It works very smoothly on my computer. However, on iPad or iPhone, the scroll event, which looks like this:
$(window).on('scroll', function(){...});
...if you flick to scroll the screen, the scrolling happens automatically, and the event doesn't fire until the scrolling comes to a stop. If you move your finger to scroll, the event doesn't fire until you let go. In other words, it does not fire as you move (i.e., scroll) the screen.
Is there some way I can capture both the movement of the user's finger as the screen is scrolled, and also as the "inertia" movement is happening? If my script would run when those events happen, the screen should be updated along the way, and it should all happen smoothly like it does on my computer.
I assume this has something to do with iOs. I don't have an Android device to test with... not sure if it is also an issue there or not.
Would appreciate any advice.
Thank you!
you could try using the touchmove event instead for mobile users. that way the code runds when they move their finger instead of after they let go.
$(document).on('touchmove', function(){...});
more info here: https://developer.mozilla.org/en-US/docs/Web/Events/touchmove
Like intelligentbean said, you could use the "touchmove" event and listen to it, you could also use touchstart and touchend if you want to do anything special before or after the touch happened.
Also, the jQuery event is also available for touch events, but its not the event passed on the parameter of the listener function, but rather on one of its properties:
$(document).on('touchmove',function(e){
touchEvent = e.originalEvent.touches[0]; //this is your usual jQuery event, with its properties such as pageX and pageY properties
});
I am creating a web app that uses the jquery.mousewheel.js plugin to detect the user's mousewheel and then scroll between the two sections.
The body element is also set to overflow:hidden so I can't detect a scroll event.
It works perfectly on the desktop but I've tried it on iPhone and it doesn't trigger the mouse wheel event at all. So is there some sort of add-on to the plugin I am using or an alternative event I can listen for, that will tell me when the user tries to scroll down/up vertically?
Using something like Hammer.js you can detect swipes via swipeup & swipedown events, and it even includes a jquery plugin so you can just write the following:
$("html, body").hammer().on("swipedown", function(e) {
// do scroll up stuff
});
$("html, body").hammer().on("swipeup", function(e) {
// do scroll down stuff
});
You can capture the gestures with HammerJS, but then you have to code the scrolling yourself. Another option is to use iScroll with probing enabled, letting you capture the scroll position without interfering. More here:
javascript scroll event for iPhone/iPad?