trigger scroll events on mobile momentum scroll - javascript

Not sure if I worded it correctly, but I am almost done with a workaround for creating sticky elements on mobile. So element is in doc flow then sticks to the top once it hits top of window. Waypoints.js does this but does not work very well on mobile.
So far I have been able to get it working normally on desktop (not a big deal), have been able to get it working on mobile touch scroll (kind of a big deal) but if the user lifts the finger off and the momentum scrolling takes over then the events don't fire until the momentum/scrolling stops.
Does anyone know how to make scroll events trigger during this momentum scroll?
This is what I did to make it work with touch scroll:
var stickyElementPosition = $('#thing-to-be-sticky').offset().top;
$(window).on("touchmove",function(){
var scrollPosition = $('body').scrollTop();
console.log(scrollPosition);
if(scrollPosition >= stickyElementPosition){
$('#thing-to-be-sticky').addClass('stuck');
}
else{
$('#thing-to-be-sticky').removeClass('stuck');
}
});
I made a JS fiddle but am not sure how to use it on a touch device. it just tries to scroll the entire page rather than the iframe/result.
link to fiddle

Related

How to trigger wheel event on mobile

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
}

How to keep window scroll position after screen rotation?

I have the problem to keep latest window scroll position after screen orientation has been changed.
For example, on the page
http://www.svoboda.mobi/a/27582777.html
when I scroll to the middle of the screen and then rotate from portrait to landscape or vice versa, the screen position is going to top of the page instead of to keep latest position.
It affects Android phones, iOS, and probably other devices. It's working correctly on Nokia Lumia 520.
I know, that I can use some javascript like
$(window).on(scroll, function() {
//save the current scroll position somehow
});
$(window).on("orientationchange", function(event){
//scroll window to saved position
});
but I don't want to solve that by this way. I still don't know, what is the cause of that? I think it must be some error in CSS, because when I turn off javascript, the problem still occurs. Thank you for help.

Problems with .scroll function in mobile browsers

I am trying to get a div to go from 100% opacity to 0% opacity on scroll.
I made this Fiddle and it works great in a web browser, just as I'd hope. It works in mobile browsers too, but with one horrible downside.
var divs = $('.cover_image');
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({
'opacity': (1 - st / 40)
});
});
(What is happening in the fiddle is the top div is going to opacity:0 as you scroll, revealing another div below it with the same background-image, but blurred. Creating the impression the same image is blurring the more you scroll)
In a web browser as you scroll the div drops in opacity progressively with a fade like affect which is great.
However in a mobile browser the change of opacity doesn't take effect until you release your finger from the the screen. So there is no progressive change of opacity. It only makes the changes visually as you release your finger from the screen, not as you scroll.
Is there a solution for this? I have tried adding in scrolling touch to my css, but it doesn't make a difference.
-webkit-overflow-scrolling: touch
Scrolling distance on mobile works very different from desktop. Even if you detect each step in the touch event, this is only half the truth. When the user releases, the site will continue to scroll for a bit while deaccelerating. This is called momentum scroll and will in most cases not be picked up by the touch event.
There are to my knowledge no perfect solution to this, since different devices handle scroll and touch very differently. There are however a few options you could look into.
Scrolling libraries
There are libraries to help you solve this problem. For instance one called scrollability that emulates scrolling to work more consistently.
Scrollability adds a good imitation of iOS native scrolling to your
mobile web apps.
Scrollability is a single script, it's small, and it has no external
dependencies. Drop it into your page, add a few CSS classes to
scrollable elements, and scroll away.
Ignore the scroll completely
Don't look at the touch or scroll events. Instead use setInterval or requestAnimationFrame with desired frequency that reports the pages current position (document.documentElement.scrollTop) at all time. Base your animation on this value instead of scroll or touch events. You might want to limit this to touch devices since it's not needed for desktop.
Write your own scroll functionality
Disable scrolling and make your own, without for instance momentum scroll, that is suited for your needs. Note that the scroll event is usually disabled on desktop if you disable scroll, but mousewheel works. I have been down this path and I would not recommend it. Instead you should probably go with the library approach at the top.

iScroll 5 trackpad speed too fast

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.

jquery.mousewheel.js iPhone scrolling

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?

Categories