Scroll Properties

<html>

<head>
	<title>HTML DOM scrollLeft Property</title>
	<style>
		#div {
			width: 400px;
			overflow: auto;
			margin: auto;
		}
		
		#ele {
			width: 600px;
			background-color: green;
			color: white;
		}
	</style>
</head>

<body style="text-align: center;">
	<h1 style="color:green;">
			Close Tag
		</h1>

	<h2>
			DOM scrollLeft Property
		</h2>

	<div id="div" onscroll="myfun()">
		<div id="ele">
			<p>Close Tag</p>
			<p> Java Script Tutorial </p>
		</div>
	</div>

	<p id="p"></p>

	<script>
		function myfun() {
			var doc = document.getElementById("div");
			var x = doc.scrollLeft;
			document.getElementById("p").innerHTML =
				"Horizontal scroll: " + x + "px";
		}
	</script>
</body>

</html>