In the latest version of OSX and safari you can use mouse swipe gestures to go forwards and backwards through your browser history. my problem: I have a page with a horizontally scrolling image gallery. If you're using the mouse swipe gesture to scroll through the images, when you get to the end of the images its very easy to swipe into the next or previous page...
does anyone know a way to explicitly disable this using css or any other method?
Perhaps the following documents can help:
Handling Gesture Events
Preventing Default Behaviour
: with event.preventDefault();
These might only apply to iOS though.
Aside from that, I would say it's just how the browser handles the gestures, similar to how mouse-wheel scrolling will scroll a DIV block until it reaches the end then start to scroll the page as a whole.
Unfortunately, there's no way to prevent this behaviour since it's a browser gesture (event.preventDefault() on touchstart event won't work).
Related
On mobile when you swipe up slowly fullpage.js jumps ahead multiple sections like a fast forward or something (my site for example). Is there any way to turn off that feature? What I want is slow swipe up to reveal the lower section and animate to that section when you release. The demo on the main website here has this behaviour, but I can't see any option for it.
Sure!
You can do that by using the Drag And Move extension for fullpage.js.
This will allow you to scroll like in the demo page.
Due to performance issues I've change our wall scrolling to use native scrolling (overflow-scroll) instead of js scrolling. (The infinite scroll is working)
The performance is somewhat better but here is the weird thing:
In android, when I scroll down, it just doesn't scroll down after some scrolling (scroll back up is working). When I do something like opening and closing the statusbar of the physical/simulator phone, then it is working again.
I guess it something related to the element refresh of the android WebView, any idea?
I use ScrollMagic to trigger animations on each section of a web page. This works great for desktop and for some browsers on mobile.
However there are some mobile browsers (older versions of Safari and Chrome (on ipad)) that don't play these animations until the scrolling event is finished. I know there are ways around that. However instead, I would like to simply turn off these animations when not supported.
Is there a way to detect that with Modernizr? Or would I have to target specific browsers and its versions?
You wouldn't detect parallax animation. That isn't a browser feature, that is something that you can use browser features to accomplish.
In this case you would you be looking to detect if you are reflow the page during a scroll, or if it waits until after the scroll event fires. There is currently no detect for this, and creating one would get pretty greasy.
I believe what you are seeing is the result of the scroll event not firing as you scroll on certain browsers. I cannot think of a way to simulate this with javascript (triggering a scroll event will obviously only trigger one scroll event, so there isn't anything to gain there). As a result, I am not confident that you would ever be able to accurately detect this.
I completely agree with Patrick's answer, but would like to add that it is indeed possible to have immediate scroll events on the mobile versions of chrome and safari, you are talking about.
The issue you're describing is related to all iOS devices before version 8.
Before then the mobile browser engine did not trigger "true" scroll events while scrolling, but only once scrolling had come to a full halt (so after the inertia stopped). Even the execution of javascript was suspended, so you couldn't just run a loop to check the scroll position.
Long story short: There are ways around it using containers for scrolling and requestAnimationFrame.
The easiest way I found to get scroll events for pre iOS8 devices is iScroll.
I would recommend to check out this: http://janpaepke.github.io/ScrollMagic/examples/advanced/mobile_basic.html
and this:
http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html
So getting back to your original question: How to detect when you would even need those workarounds.
You'd need to check if the you're on iOS version 7 or lower, which, to my knowledge, can't be done with modernizr, as it is a feature detection library.
So check out this thread to learn more: Detect iOS version less than 5 with JavaScript
Can I find out how much a Magic Mouse has scrolled by in a IOHIDDeviceRegisterInputValueCallback function?
I am trying to detect the scrolling gesture from a Magic Mouse using the CFCallbacks. I have it working fine with a standard USB mouse with a scroll wheel, but it seems that the Magic Mouse reports scrolling in a different way.
Thanks.
I ended up getting the scroll information from the window event in Cocoa instead. Not a full fix for this issue but I still was able to access the scroll message.
If I limit WebBrowser's height, and content is longer, scrollbar is created inside the WebBrowser (effectively, HTML page is long), similar to IE in WP7. This scrollbar behaves the way I want to - after swift swipe it continues to scroll, slowing down.
But if I place a div with a scrollbar in the WebBrowser content, this scrollbar behaves like regular HTML scrollbar, it does not keep scrolling after user stops touching the display.
Is there a way to make this work too ?
Thanks
No, not easily. The WP7 IE9 browser control supports the overflow:scroll CSS property that allows the user to scroll content within the current page. It is worth noting that most Android and iPhone browsers do not support this, although it has been added in iOS5. None of these browser support inertia scrolling for overflow:scroll, WP7 included.
The only way to get inertia scrolling for overflow content is to do it yourself using JavaScript. For WebKit browsers there is a popular library, iScroll, that provides this functionality. However, it does not work for WP7 (due to lack of CSS3 3D transforms that are used to push the scrolling content onto a different layer for hardware acceleration) - so you will need to write your own implementation. Good luck!