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!

Force a specific scroll distance for various scroll types?

I wasn't able to find any events to hook into for this - I want to take control over the scroll distance when the user does things like moving the mouse wheel, clicking a scroll button (up or down), clicking the empty space of a scroll bar, etc.
For example, if I have a list of things, and each row is 16px tall, how would I be able to force it to scroll 16 pixels for single scroll events (i.e. mouse wheel up/down, or clicking the scroll button, if one exists)? And then, if scrolling by clicking the empty scroll bar, how can I ensure it scrolls by a fixed amount, so when it's done scrolling, it would be perfectly aligned? The best example I can give is how it behaves in Excel. Provided you have the scroll lines to be set to 1 line in settings, scrolling up or down will move one row at a time. Clicking the empty part of the scroll bar moves down exactly to the next not-fully-visible row.
My research, up until now, indicates I'll be using the .scroll() function (at least if I'm using jQuery), but I'm completely stumped at the plan of attack, even moreso because I'm unable to find any way to differentiate between a mouse wheel scroll, button scroll, or scrollbar jump (or whatever the terms would be).
Is there also a way to restrict this in CSS, avoiding any JavaScript at all?

To achieve this, you need to use scroll-snap-type, as stated by DM in the comments.
You'd set the parent div to have scroll-snap-type: y mandatory;, and it's immediate children elements would have scroll-snap-align: top (or bottom)! This should allow rows to be viewed perfectly, provided the containing element is an appropriate size (and assuming each child element is a known fixed size).

Is there a way to prevent browsers from caching values like scroll position and zoom level?

I am designing an interactive web game that takes place entirely in the browser. It uses html5, and everything (including the elements) is part of the game world. Since this is the case, I need some pretty strict control over the positioning of my elements, scroll position, zooming, etc.
One particular level requires that an element be placed off screen (just outside the viewport) so that the user must scroll the page to find it. Unfortunately, after scrolling, the page seems to record the new width of the page including the originally unseen element. When the page is refreshed, the zoom level is adjusted to fit the entire screen with the hidden element into the viewport. This gives away the puzzle and ruins the level.
I know that browsers store information like scroll position so that when a user revisits the page they can pick up right where they left off. This is great for some things, but bad for my purposes. Is there a way to prevent this caching behavior of my browsers? Is there a way to get or set the zoom level of a page using JavaScript?
Currently I am using the code below to reset the scroll position right before the user leaves the page. It works pretty well, but the user can see the page scroll right before leaving.
window.addEventListener("beforeunload",function(event_){
window.scrollTo(0,0);
/* What I would love is if there were a way to do this: */
// window.zoomTo(1.0);
/* But I'm sure that's asking for too much. */
});

I managed to fix my problem by keeping the hidden element out of the html flow all together by setting its css position property to fixed. I simulate page scrolling by changing the elements style.left value with some custom touch event handlers. The page has no need to resize or zoom with the addition of the off screen element because fixed position elements do not effect layout.
This doesn't answer my question about resetting the zoom level, however, and I would still appreciate any insight anyone may have.

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.

Differentiate between a scroll caused by .scrollLeft and a user trying to scroll in an HTML page

I have a scrollbar that has to follow some timeline. It is being constantly scrolled with .scrollLeft using setInterval.
I still want the user to be able to naturally take control and just drag the scrollbar away. If I can detect the user did that, I would just turn off the setInterval timer and leave the control to the user until he explicitly turns the auto scroll back on.
Is there a way to differentiate the user scroll event, from the scroll created by .scrollLeft?

You can set a flag before changing scrollLeft and clear it afterwards, then check the flag in the scroll event.
Since Javascript is run on the UI thread, it is not possible for the user to scroll while your code is running.

One alternative is to give up using a scroll-bar at all and do it using CSS and a jQuery slider control. This also gives you the option of making it look more like a time-line. you can set the scroller elements to whatever CSS you want.
There are a few out there, but it's not too hard to roll-your-own using a jQuery draggable control and constraining one axis inside a long, narrow container DIV.