jbail/scolling_content_example.html

## scolling_content_example.html
<!DOCTYPE html>
<html>
<head>
<title>Scrolling content and getting properties - Example HTML using a dash of CSS3 and JavaScript</title>
<style>
.square{
	width:150px;
	height:150px;
	background:#AFAFAF;
}

.content{
	width:500px;
	height:500px;
}

.console p{
	padding:2px;
	background:#DFDFDF;
	font-size:9px;
	margin:0 0 1px 0;
}

.left-col{
	width:49%;
	padding:0;
	margin:0 1% 0 0;
	float:left;
	clear:none;
}

.right-col{
	width:49%;
	padding:0;
	margin:0 0 0 1%;
	float:left;
	clear:none;
}

.clear{
	display:block;
	clear:both;
	height:0px;
}


/*
* Make the element scroll on both x and y axes - CSS2
*/
.scroll-both {
    overflow:scroll;
}

/*
* Make the element scroll on x axis only - CSS3
*/
.scroll-x {
    overflow-x:scroll;
    overflow-y:hidden;
}

/*
* Make the element scroll on y axis only - CSS3
*/
.scroll-y {
    overflow-y:scroll;
    overflow-x:hidden;
}
</style>
<script>
var bootstrap = function() {
	var yscroll = document.getElementById("yscroll");
	yscroll.onscroll = function() {
		var console = document.getElementById("yconsole");
		var content = document.getElementById("ycontent");
		console.innerHTML += "<p>offsetHeight=" + yscroll.offsetHeight + ", scrollTop=" + yscroll.scrollTop + ", scrollHeight=" + content.scrollHeight + "</p>";
	};

	var xscroll = document.getElementById("xscroll");
	xscroll.onscroll = function() {
		var console = document.getElementById("xconsole");
		var content = document.getElementById("xcontent");
		console.innerHTML += "<p>offsetWidth=" + xscroll.offsetWidth + ", scrollLeft=" + xscroll.scrollLeft + ", scrollWidth=" + content.scrollWidth + "</p>";
	};
}
</script>
</head>
<body onload="bootstrap()">

	<div class="left-col">
		<div class="square scroll-y" id="yscroll">
			<div class="content" id="ycontent">
				&nbsp;
			</div>
		</div>
		<p><a href="#" onclick="document.getElementById('yconsole').innerHTML = '';return false;">clear</a></p>
		<div class="console" id="yconsole"></div>
	</div>

	<div class="right-col">
		<div class="square scroll-x" id="xscroll">
			<div class="content" id="xcontent">
				&nbsp;
			</div>
		</div>
		<p><a href="#" onclick="document.getElementById('xconsole').innerHTML = '';return false;">clear</a></p>
		<div class="console" id="xconsole"></div>
	</div>

	<div class="clear">&nbsp;</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Scrolling content and getting properties - Example HTML using a dash of CSS3 and JavaScript</title>
	<style>
	.square{
	width:150px;
	height:150px;
	background:#AFAFAF;
	}

	.content{
	width:500px;
	height:500px;
	}

	.console p{
	padding:2px;
	background:#DFDFDF;
	font-size:9px;
	margin:0 0 1px 0;
	}

	.left-col{
	width:49%;
	padding:0;
	margin:0 1% 0 0;
	float:left;
	clear:none;
	}

	.right-col{
	width:49%;
	padding:0;
	margin:0 0 0 1%;
	float:left;
	clear:none;
	}

	.clear{
	display:block;
	clear:both;
	height:0px;
	}


	/*
	* Make the element scroll on both x and y axes - CSS2
	*/
	.scroll-both {
	overflow:scroll;
	}

	/*
	* Make the element scroll on x axis only - CSS3
	*/
	.scroll-x {
	overflow-x:scroll;
	overflow-y:hidden;
	}

	/*
	* Make the element scroll on y axis only - CSS3
	*/
	.scroll-y {
	overflow-y:scroll;
	overflow-x:hidden;
	}
	</style>
	<script>
	var bootstrap = function() {
	var yscroll = document.getElementById("yscroll");
	yscroll.onscroll = function() {
	var console = document.getElementById("yconsole");
	var content = document.getElementById("ycontent");
	console.innerHTML += "<p>offsetHeight=" + yscroll.offsetHeight + ", scrollTop=" + yscroll.scrollTop + ", scrollHeight=" + content.scrollHeight + "</p>";
	};

	var xscroll = document.getElementById("xscroll");
	xscroll.onscroll = function() {
	var console = document.getElementById("xconsole");
	var content = document.getElementById("xcontent");
	console.innerHTML += "<p>offsetWidth=" + xscroll.offsetWidth + ", scrollLeft=" + xscroll.scrollLeft + ", scrollWidth=" + content.scrollWidth + "</p>";
	};
	}
	</script>
	</head>
	<body onload="bootstrap()">

	<div class="left-col">
	<div class="square scroll-y" id="yscroll">
	<div class="content" id="ycontent">

	</div>
	</div>
	<p><a href="#" onclick="document.getElementById('yconsole').innerHTML = '';return false;">clear</a></p>
	<div class="console" id="yconsole"></div>
	</div>

	<div class="right-col">
	<div class="square scroll-x" id="xscroll">
	<div class="content" id="xcontent">

	</div>
	</div>
	<p><a href="#" onclick="document.getElementById('xconsole').innerHTML = '';return false;">clear</a></p>
	<div class="console" id="xconsole"></div>
	</div>

	<div class="clear"> </div>

	</body>
	</html>