How can i have a section in iPhone web site(header) to remain in a fixed position and rest of the site to scroll(preventDefault or watever) so that it behaves like a native app...any safari api's or javascript that i can use to do this?
I think i found the solution for you: iScroll by Matteo Spinelli (Demo)
The overflow:scroll for mobile webkit.
Project started because webkit for
iPhone does not provide a native way
to scroll content inside a fixed size
(width/height) div. So basically it
was impossible to have a fixed
header/footer and a scrolling central
area. Until now.
If I understand that right you want an element staying at a fixed position? Have you tried creating a div and setting it's css attribute position to fixed? See here: CSS Property Position
Related
I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.
This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.
There are currently jQuery plugins that make a system's native scroll bar look like the iOS scroll bar (http://rocha.la/jQuery-slimScroll and others). Example code for these platforms makes it look like they need a fixed height to work.
$('#example').slimScroll({
height: '250px'
});
I want to adopt the new flexbox standard (2012-2013) edition. The height and width of the container can change. Is it possible to overwrite the native scroll bar in a similar manner to jQuery slim scroll? I know webkit has this http://css-tricks.com/custom-scrollbars-in-webkit/, but I want to have support across the modern browsers (as of the time of this post, IE11, FF26, Chrome 31, Safari 7).
Is this possible? Or will I have to overwrite the DOM hacking that jQuery slim scroll seems to do?
Probably not an easy task, my friend. The cross browser solutions are probably replacing the element with a bunch of little divs that look like a scrollbar, and then calculating how much to scroll the content by using the overall height VS the viewable height.
This issue seems to affect android only.
I'm working on a phonegap App for a client and I have a scrolling area using jQuery animate. However one of the nested divs doesn't move with it's parent div and stays fixed in position.
Again this issue only presents on android devices and works fine in desktop browsers and iOS.
Can anyone shed any light on what this may be?
Seems jQuery animate runs into issues with relatively positioned items, removed relative position and used margin and it seems to work now.
I've created a virtual-rendering implementation (similar to what you would find in the project SlickGrid). Everything seems to be working very well, with one problem: On Mac, smooth scrolling (the rubber-banding and fade-to-stop) doesn't work on my element when I add overflow: auto??
http://syntaqx.com/infiniload/
Any help would be appreciated.
You can use JS Librarys:
https://github.com/ftlabs/ftscroller
FTScroller is a cross-browser Javascript/CSS library to allow touch,
mouse or scrollwheel scrolling within specified elements, with
pagination, snapping and bouncing support.
I have a container on a page, which has has a huge overflow-x. On a iPad, the user can simple swipe-scroll left, just like they would do vertically when scrolling down the page.
On a PC, scrollbars are visible so the user can scroll left and right.
However, on the Android, no scroll bars appear and I can't swipe left like I can on the iPad.
Is some special CSS and JS needed here? Does anyone know why this happens?
The overflow property is not working properly in Android devices before Android 3.0. But it is solved from the Android 3.0 or later.
I also had this issue while I was developing an application.
This issue was solved by using a button and animating the element's margin-top property so that it is changed to negative value, therefore creating a scroll effect.