The first approach use several layers. It takes advantage of the fact that you cannot trigger a "back" unless BODY's "scrollLeft" is 0. The disadvantage to this approach is the appearance of an additional horizontal scrollbar. There may also be some subtle side-effects to using "position: fixed".
1. The HTML element acts as a container for the BODY element, and uses "overflow: scroll".
2. The BODY element is 2 pixels wider than the page, so it can scroll 1px in either direction when its "scrollLeft" is 1 (neutral position).
3. We bind to the "onscroll" event of the window, and reset BODY's "scrollLeft" to 1.
4. The content is inside a DIV, which uses "position: fixed" so it doesn't jump around when the BODY is scrolling.
The second approach uses the hash / history stack. Rather than trying to stop a "back" or "forward", we simply "buffer" the history stack so that we can detect any changes and return to our neutral position.
1. When we load the page, we change the hash to "#previous", then "#neutral", then "#next".
2. We go back to "#neutral" using "window.history.back()".
2. We bind to the "onhashchange" event of the window, and reset the hash to "#neutral" as needed.