mrienstra · October 3, 2012 23:48
diff --git a/README b/README
 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.
diff --git a/no_scroll_triggered_navigation.html b/no_scroll_triggered_navigation.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>No scroll-triggered page navigation</title>
 <style>
 html, body {
  margin: 0;
  padding: 0;
 }
 #content {
  position: fixed;
  left: 0;
  top: 0;
 }
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $('body')
    .width( $(window).width() + 2 )
    .height( $(window).height() )
    .scrollLeft(1);

  $('#scrollNavigationPreventionWrapper')
    .width( $(window).width() - 20 )
    .height( $(window).height() - 20 )
    .css('padding', 10);

  $(window).scroll(function(){
    if ($('body').scrollLeft() !== 1) {
      $('body').scrollLeft(1);
    }
  });
 });
 </script>
 </head>
 <body>

 <div id="scrollNavigationPreventionWrapper">

  <h1>No scroll-triggered page navigation</h1>
  <p>Inspired by <a href="https://github.com/micho/jQuery.preventMacBackScroll">micho / jQuery.preventMacBackScroll</a>.</p>

  <div style="margin-left:10%;width:80%;height:300px;overflow-x:scroll;overflow-y:hidden;position:relative;">
    <div style="color:#fff;width:2000px;height:300px;position:absolute;background:-webkit-linear-gradient(-45deg, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);">
      <h1>Scroll Me!</h1>
    </div>
  </div>

 </div>

 </body>
 </html>
diff --git a/no_scroll_triggered_navigation2.html b/no_scroll_triggered_navigation2.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>No scroll-triggered page navigation</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
  var originalLocation = window.location,
      hashPos,
      locationNoHash;

  if ((hashPos = originalLocation.href.indexOf('#')) === -1) {
    locationNoHash = originalLocation.href;
  } else {
    locationNoHash = originalLocation.href.substring(0, hashPos);
  }

  window.location = locationNoHash + '#back';
  window.location = locationNoHash + '#neutral';
  window.location = locationNoHash + '#forward';
  window.history.back();

  // setTimeout to allow code above to finish triggering "onhashchange" events.
  window.setTimeout(function() {
    var $span = $('p span');
    $(window).on('hashchange', function(e) {
      if (window.location.hash === '#forward') {
        console.log('forward');
        $span.text( $span.text() + 'forward ');
        window.history.back();
      } else if (window.location.hash === '#back') {
        console.log('back');
        $span.text( $span.text() + 'back ');
        window.history.forward();
      }
    });
  }, 100);

  $('p a').click(function(e) {
    // Clear
    e.preventDefault();
    $('p span').text('');
  });

 });
 </script>
 </head>
 <body>

 <h1>No scroll-triggered page navigation</h1>
 <p><span></span> <a href="#">clear</a></p>

 <div style="margin-left:10%;width:80%;height:300px;overflow-x:scroll;overflow-y:hidden;position:relative;">
  <div style="color:#fff;width:2000px;height:300px;position:absolute;background:-webkit-linear-gradient(-45deg, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);">
    <h1>Scroll Me!</h1>
  </div>
 </div>

 </body>
 </html>
	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.
	<!DOCTYPE html>
	<html>
	<head>
	<title>No scroll-triggered page navigation</title>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	}
	#content {
	position: fixed;
	left: 0;
	top: 0;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	$('body')
	.width( $(window).width() + 2 )
	.height( $(window).height() )
	.scrollLeft(1);

	$('#scrollNavigationPreventionWrapper')
	.width( $(window).width() - 20 )
	.height( $(window).height() - 20 )
	.css('padding', 10);

	$(window).scroll(function(){
	if ($('body').scrollLeft() !== 1) {
	$('body').scrollLeft(1);
	}
	});
	});
	</script>
	</head>
	<body>

	<div id="scrollNavigationPreventionWrapper">

	<h1>No scroll-triggered page navigation</h1>
	<p>Inspired by <a href="https://github.com/micho/jQuery.preventMacBackScroll">micho / jQuery.preventMacBackScroll</a>.</p>

	<div style="margin-left:10%;width:80%;height:300px;overflow-x:scroll;overflow-y:hidden;position:relative;">
	<div style="color:#fff;width:2000px;height:300px;position:absolute;background:-webkit-linear-gradient(-45deg, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);">
	<h1>Scroll Me!</h1>
	</div>
	</div>

	</div>

	</body>
	</html>