Develop Reference

Scroll the page up or down after scrolling reaches the top or bottom of a scrollable element in mobile

I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!

JQueryMobile: How to start the page x pixels scrolled down?

I've got a JQueryMobile site, and I want to place a div at the top, that isn't visible on the first page load, but only when the user scrolls up. It's meant to emulate a pull-to-refresh. Basically like what these guys did, using this Javascript. This isn't a pull-to-refresh, but they're doing what I want to, which is 'hiding' a div above the initial view.
Unfortunately, JQueryMobile waits until the site is fully loaded, then automatically scrolls all the way back up to the top. So even though I can scroll the page down immediately, a few seconds later (random time), it'll scroll back up.
Is there any way to either stop the scrolling-back-up of JQueryMobile, or to create this div using HTML/CSS?

You can set display:none on your header so it isn't visible, then show it and scroll at the same time. See http://jsfiddle.net/Lanny/CDhmr/1/. Even if there's a significant delay between your page being rendered and your javascript executing scroll will happen at the same time that you extend the document.

It seems that $.mobile.defaultHomeScroll might help here.
Haven't used JQueryMobile, but noticed this pull request on GitHub:
https://github.com/jquery/jquery-mobile/pull/5751

How to mimic a swipe without a mobile device

In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.

http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.

Mobile Safari and x-offset

I posted previously (https://stackoverflow.com/questions/5737833/adjusting-horizontal-offset-for-an-image-gallery-in-mobile-safari) about using Javascript to find the x-offset of a viewport in Mobile Safari and then apply that as a px-based value to an element's inline CSS.
The post was a little long-winded and specific to that application, so I'll ask the real question here:
Is there a way to determine the viewport's x-offset in Mobile Safari, and then apply it to an element as an inline style?
This will be necessary, not just to place the image gallery overlay properly, but also to use named anchors throughout the site. It's my understanding that some JS trickery is required, as Mobile Safari doesn't support the usual methods of determining the x-offset of an object (or the viewport).

I'm not exactly sure if I understand your question but in javascript on mobile safari (asuming Iphone,Ipod,Ipad) using jquery I use the following lines to position div layers with z-index on top of each other. var left1 = jQuery("div#Layout_Border_div").offset().left;
var top1 = jQuery("div#Layout_Border_div").offset().top;
jQuery("div#LayoutPage_Backward").
css( { position: "absolute","left": (left1) + "px","top": (top1) + "px" } );
if you can give me some sample of code I can help more.

I managed to come up with an almost-solution: I added marginLeft: window.pageXOffset + "px", to all four references of the positioned wrapper divs in photoswipe.js.
So now, clicking a photo results in the photo viewer appearing inside the viewport, if it's been scrolled at all.
However, it's not ideal: I'm manually editing photoswipe.js source, first of all, and second of all, the gallery doesn't actually follow the user's scroll (so, when the user scrolls further to the right and clicks another image, the gallery appears where its first position was).
This is close to being fixed. How can I make the photo gallery follow the user's scroll dynamically, preferably without editing photoswipe.js source code?

I need some pointers on how to implement inertia

Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...
I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.
This is specifically for Mobile Safari (iPad, iPhone) web content
What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.
The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.
I'm stumped. Does anyone have any suggestions?

iScroll implements scrolling with inertia, but I'm not sure how it would react to you adding and removing elements mid-scroll. Might be worth looking into though.