I have created a website at the following address http://www.light-union.com/
Background Info: The website works as I expect on android, The website problem I am facing, as I see majority of the developers in this world are facing is the incompatible scrolling feature and fixed elements for iPhone and iPad.
I have decided to conform to such restrictions by making the banner be position:absolute to the top and remove the navigation bar on the left side so these bugs can be avoided all together... Unless someone has a solution to these issues that I am unaware of.
Problem:
When the user touches one of the buttons in the nav bar, it seems to work at first and scroll to expected location, there is an animation, but when the user scrolls themselves, this is where the problems seem to occur. I understand this seems to be a unanimous fault for people but perhaps this is due to my lack of understanding in iOS rather then iOS itself. This will also render the top banner useless.
This is the main issue though, there exists scrolling elements for the text at the bottom of each back image. For example in the http://www.light-union.com/in/ page, in the bottom section, the text is scrollable but the other sections seem to be hit and miss with the scrolling element, where the middle section is always miss.
Implementation so far
.para{
overflow-y:scroll;
font-size: 0.8675em;
height:65%;
display:block;
-webkit-overflow-scrolling: touch;
}
This is the css used on the paragraphs where I wish to implement the scrolling feature.
NOTE: For desired result on iOS check android device
Related
My project needs a UI like Google Chrome's Tab Switcher. There was such a question in the past but the responses are mostly irrelevant, as it was written 5 years ago and the responses had to do with a static and overlapping Evernote UI (here). I've been trying for days, but the best I could get was something really sluggish. Also interestingly, when coded, at some areas it worked, then it didn't. I didn't choose any code because honestly my code probably is more wrong than right and I should start fresh from the beginning.
What is it that makes it so confusing? Bottom down must be initially 100% visible, next up 50%, next 25% (relative to their height) and also obviously it's scrollable. The scroll direction like chrome is first (latest) at bottom and last at the top. However, I would also like the distance between the first and second to increase, should you scroll down to see less recent views, the second would have to be able to be 100% visible, as the bottom app disappears off screen.
Yes, it's a jailbreak project but that's irrelevant as I've coded a replica in the iOS simulator for this part. It's just a layout problem for a UICollectionView. All of the rest of the project, has been coded
I think that you can you the following library to achieve the desired result.
StickyCollectionView-Swift
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'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.
We're currently working on an iPad version of our web application at work. We are seeing inconsistent behavior with regards to two-finger scrolling on scrollable areas within others scrollable areas across two iPads. Both devices are iPad2 models.
On one device, dojo grids and trees require one finger to scroll. On the other, they require two fingers to scroll. On both devices Safari is being used to view the website.
What could cause this behavior? Is there some setting we haven't discovered that dictates whether you need to use 1 or 2 fingers?
Looks like it's a difference in IOS versions (one is on 4, the other on 5).
It's important to note that
-webkit-overflow-scrolling:touch is not the same as one-finger scrolling enabled by iOS5.
-webkit-overflow-scrolling uses the iPad's built in functionality (the touch acceleration and bounce). However, if the contents in your div change, or you manually move the contents inside the div (ie you made your own div scrollbar and are scrolling the contents), enabling this will mess things up. What it will do is make the "top" of the scroll able div wherever it happens to be located. What does this mean? If your contents are scrolled half way down and then you add new content to the div, with -webkit-overflow-scrolling:touch, the very top of the touch-scroll area will be half way down your div. You will not be able touch-scroll back to the top.
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