7cc/body-scroll-in-Standards.html

## body-scroll-in-Standards.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>body scroll in Standards Mode</title>
<style>
html{
  height: 100%;
  overflow: hidden;
}

body{
  height: 100%;
  overflow: auto;
}

/* irrelevant */
#mid{
  margin: 500px 0
}

.title{
  display: inline-block;
  width: 3.2em
}
button{
  width: 5.3em
}
</style>
</head>
<body>
<p>
  <span class="title">window</span>
        <button id="to-bottom">bottom</button>
        <button id="to-top">top</button><br>
  <span class="title">html</span>
      <button id="html-bottom">bottom</button>
      <button id="html-top">top</button><br>
  <span class="title">body</span>
      <button id="body-bottom">bottom</button>
      <button id="body-top">top</button>
</p>
<ul>
  <li>body scroll by html (directly)
  <li>window can scroll by JS
  <li>document.body.scrollTop
  <ul>
    <li>returns: Firefox, IE
    <li>not returns: Webkit, GC
  </ul>
</ul>

<pre style="border: 1px solid orange">
var all = document.getElementsByTagName("*")
for(var i=all.length; i--;){
  all[i].scrollTop = 100
}
</pre>

<p><a href="#mid">#mid</a></p>
<p id="mid">#mid</p>
<p><a href="#top">top</a>
<script>
window["to-bottom"].addEventListener("click", function(){
  scrollTo(0, 1000)
}, false)

window["to-top"].addEventListener("click", function(){
  scrollTo(0, 0)
}, false)

window["html-bottom"].addEventListener("click", function(){
  document.documentElement.scrollTop = 1000
}, false)

window["html-top"].addEventListener("click", function(){
  document.documentElement.scrollTop = 0
}, false)

window["body-bottom"].addEventListener("click", function(){
  document.body.scrollTop = 1000
}, false)

window["body-top"].addEventListener("click", function(){
  document.body.scrollTop = 0
}, false)

;[window, document, document.documentElement, document.body].forEach(function(e){
  e.addEventListener("scroll", logEvent, false)
})

function logEvent(e){
  console.log(e.currentTarget, e.target)
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<title>body scroll in Standards Mode</title>
	<style>
	html{
	height: 100%;
	overflow: hidden;
	}

	body{
	height: 100%;
	overflow: auto;
	}

	/* irrelevant */
	#mid{
	margin: 500px 0
	}

	.title{
	display: inline-block;
	width: 3.2em
	}
	button{
	width: 5.3em
	}
	</style>
	</head>
	<body>
	<p>
	<span class="title">window</span>
	<button id="to-bottom">bottom</button>
	<button id="to-top">top</button><br>
	<span class="title">html</span>
	<button id="html-bottom">bottom</button>
	<button id="html-top">top</button><br>
	<span class="title">body</span>
	<button id="body-bottom">bottom</button>
	<button id="body-top">top</button>
	</p>
	<ul>
	<li>body scroll by html (directly)
	<li>window can scroll by JS
	<li>document.body.scrollTop
	<ul>
	<li>returns: Firefox, IE
	<li>not returns: Webkit, GC
	</ul>
	</ul>

	<pre style="border: 1px solid orange">
	var all = document.getElementsByTagName("*")
	for(var i=all.length; i--;){
	all[i].scrollTop = 100
	}
	</pre>

	<p><a href="#mid">#mid</a></p>
	<p id="mid">#mid</p>
	<p><a href="#top">top</a>
	<script>
	window["to-bottom"].addEventListener("click", function(){
	scrollTo(0, 1000)
	}, false)

	window["to-top"].addEventListener("click", function(){
	scrollTo(0, 0)
	}, false)

	window["html-bottom"].addEventListener("click", function(){
	document.documentElement.scrollTop = 1000
	}, false)

	window["html-top"].addEventListener("click", function(){
	document.documentElement.scrollTop = 0
	}, false)

	window["body-bottom"].addEventListener("click", function(){
	document.body.scrollTop = 1000
	}, false)

	window["body-top"].addEventListener("click", function(){
	document.body.scrollTop = 0
	}, false)

	;[window, document, document.documentElement, document.body].forEach(function(e){
	e.addEventListener("scroll", logEvent, false)
	})

	function logEvent(e){
	console.log(e.currentTarget, e.target)
	}

	</script>
	</body>
	</html>