I'm developing a web-app, based on the Dribbble API. In this app I have a div which shows all comments with a max-height of 200px, so if there's more than 200px worth on comments, the div gets scrollable. So far so good, works as intended on iOS.
However, when I add a Scale transfrm to this div (to mimic iOS's folder opening animation), scrolling the div breaks entirely. You can see the live version here: http://maxsteenbergen.com/longshot/
Is this fixable by setting a a new style using jQ's webkitAnimationEnd or is this without solution?
EDIT: In the meantime I found that using two fingers to scroll the div works but obviously, this is not how it's supposed to work.
It's also worth noting that scrolling DIV's don't work on older versions of iOS - it might be worth having a look at iScroll.
You can implement native iOS UI and achieve much better UI feedback. especially on scroll view. To obtain data from Dribbble API you may use 3rd-party Dribbble iOS SDK: https://github.com/agilie/dribbble-ios-sdk
Related
Is there a way in Chrome and Safari on iOS to restrict scrolling to one direction at a time? In other words, if I start scrolling an element vertically, I want to turn off the user's ability to scroll horizontally until the vertical scrolling is complete. And vice versa.
In iOS native code this is called directionalLockEnabled, and in Microsoft browsers it's -ms-scroll-rails.
Does something like this exist in CSS that Chrome for iOS (or Safari for iOS, because they use the same rendering engine under the hood) will recognize?
If not, is there a javascript solution available, ideally a React-compatible npm package?
If you're after a pure CSS solution, unfortunately there is nothing in the spec for locking scroll to a single axis at a time.
There are some great points on this thread, including some vanilla JS solutions if your use case requires locking the scroll behaviour to one axis at a time.
So I have built a site using Keith Clark's pure CSS parallax idea. And it looks good, but I'm curious if anyone has figured out how to allow inertial/momentum scrolling on iOS.
Here is my site so far.
What I know so far:
Currently inertial/momentum scrolling doesn't work because essentially the whole page is held within a container with overflow-y:auto. So when you are scrolling on the page you are scrolling within a container.
On iOS you have to apply -webkit-overflow-scrolling: touch to allow anything that scrolls that isn't the viewport to have inertial/momentum scrolling.
If you add -webkit-overflow-scrolling: touch to .parallax then the entire parallax effect breaks.
example of that here
I've tried adding iscroll.js to the page but it also breaks the page by making the children within the .parallax container to scroll in a way that isn't proper. It makes the parallax layers move up and down relative to the viewport instead of he container.
Another problem that this causes which isn't as big a deal but would be nice to address here since it's related is that on iOS the page will never go into minimal-ui since that only happens when the viewport scrolls.
I've seen people ask about this on the blog post so I figured I could bring the same problems over to stackoverflow and see if anyone has any good ideas.
Thanks!
Not what you want to hear (assuming you put in some good hours reading through Keith Clark's guide) but iOS handles scrolling events differently than desktop. It's possible you could adjust what you have already, but if you really want this you're probably better off switching to a js tool with documented support for iOS parallax + momentum. Stellar can do this, for example - http://markdalgleish.com/projects/stellar.js/docs/
I want users of my website to use pagination on their mobile devices, like for example UIScrollView with paging enabled in iOS.
Still the website should also be viewable on desktops.
So far, I tried Foundation's orbit, but that just doesn't feel fluent at all (when you release your finger, it performs the sliding a little delayed).
Is there any good alternative on how to get this done? If possible I would like the user to even slide vertically as well as horizontally.
Maybe Swipe.js is the thing you looking for.
have you tried SwipeView?
Here you have an demo gallery
I'm looking for this too, but I really think they are none.
If you want it to be fluid, you have create your own using CSS3 animation/transform and so it will not work on hold browser (IE < 10 or 11, but I'm not sure). If you want to handle touch events I recommend you to check out "jQuery Modile"
You can try iScroll 5 it's quite simple but do the trick perfectly.
You will find in the archive of the project an example of horizontal paging under demos/carousel, you will see it's quite good. :)
In addition you will be able to see all other things you can do with iScroll which should fit your demands.
I'm using the webkit-overflow-scrolling:touch property on an iOS/Android WebApp and it works in most cases and provides a native scrolling experience without Rubberband Scrolling.
Now the issue is, when the div that needs to be scrolled isn't tall enough the rubberband scrolling will happen again. I tried setting height:100% but that didn't help either.
Any ideas?
I've come across this when I made a Cordova iOS app. You can fix this by applying min-height: 101%. Though, that would make your page scrollable for a minor distance but it will trigger the desired effect you're looking for.
How can I disable the offset scrolling for my webapp?
I mean the dark gray area
http://i.stack.imgur.com/a3Rt4.png
Disable scrolling in an iPhone web application?
I've tried this but it didn't work all the time, it only works sometimes then it suddenly stops and i can scroll again.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
works, but make sure the body has a 100% height of the screen
This completely disables all touch-move events.
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
It freezes your screen in place, giving it a more native feel. But also disables any scrollable areas. If you want to keep your scrollable areas and still remove the rubber band effect at the top and bottom, see here: http://cubiq.org/iscroll.
The bottom line is that there are a number of ways to achieve this, but none are documented. They all currently rely on searching through subviews of your UIWebView and modifying their properties - all of these subviews are undocumented, so your results may vary. It is certainly not an ideal way to do things, and as you've found out results can be varied. If you can get hold of the scroll view that is contained within the web view (again, undocumented) you can disable the offset scrolling/bouncing - this link may prove helpful:
http://blog.andrewpaulsimmons.com/2010/02/controlling-uiscrollview-in-uiwebview.html
iOS 5 has an official fix for this, but you'd need to ask at devforums.apple.com or read the new documentation, because everything iOS 5 related is still under non-disclosure and can't really be discussed here.
I wrote this solution for allowing scrollable areas but preventing the body from scrolling when they're visible
https://stackoverflow.com/a/18922984/2009533