davidskuza/index.htm

## index.htm
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>
		Automatically Scroll The Window When The User Approaches The Viewport Edge In JavaScript
	</title>
</head>
<body>

	<h1>
		Automatically Scroll The Window When The User Approaches The Viewport Edge In JavaScript
	</h1>

	<script type="text/javascript">

		var edgeSize = 200;
		var timer = null;

		window.addEventListener( "mousemove", handleMousemove, false );

		drawGridLines();

		// --------------------------------------------------------------------------- //
		// --------------------------------------------------------------------------- //

		// I adjust the window scrolling in response to the given mousemove event.
		function handleMousemove( event ) {

			// NOTE: Much of the information here, with regard to document dimensions,
			// viewport dimensions, and window scrolling is derived from JavaScript.info.
			// I am consuming it here primarily as NOTE TO SELF.
			// --
			// Read More: https://javascript.info/size-and-scroll-window
			// --
			// CAUTION: The viewport and document dimensions can all be CACHED and then
			// recalculated on window-resize events (for the most part). I am keeping it
			// all here in the mousemove event handler to remove as many of the moving
			// parts as possible and keep the demo as simple as possible.

			// Get the viewport-relative coordinates of the mousemove event.
			var viewportX = event.clientX;
			var viewportY = event.clientY;

			// Get the viewport dimensions.
			var viewportWidth = document.documentElement.clientWidth;
			var viewportHeight = document.documentElement.clientHeight;

			// Next, we need to determine if the mouse is within the "edge" of the
			// viewport, which may require scrolling the window. To do this, we need to
			// calculate the boundaries of the edge in the viewport (these coordinates
			// are relative to the viewport grid system).
			var edgeTop = edgeSize;
			var edgeLeft = edgeSize;
			var edgeBottom = ( viewportHeight - edgeSize );
			var edgeRight = ( viewportWidth - edgeSize );

			var isInLeftEdge = ( viewportX < edgeLeft );
			var isInRightEdge = ( viewportX > edgeRight );
			var isInTopEdge = ( viewportY < edgeTop );
			var isInBottomEdge = ( viewportY > edgeBottom );

			// If the mouse is not in the viewport edge, there's no need to calculate
			// anything else.
			if ( ! ( isInLeftEdge || isInRightEdge || isInTopEdge || isInBottomEdge ) ) {

				clearTimeout( timer );
				return;

			}

			// If we made it this far, the user's mouse is located within the edge of the
			// viewport. As such, we need to check to see if scrolling needs to be done.

			// Get the document dimensions.
			// --
			// NOTE: The various property reads here are for cross-browser compatibility
			// as outlined in the JavaScript.info site (link provided above).
			var documentWidth = Math.max(
				document.body.scrollWidth,
				document.body.offsetWidth,
				document.body.clientWidth,
				document.documentElement.scrollWidth,
				document.documentElement.offsetWidth,
				document.documentElement.clientWidth
			);
			var documentHeight = Math.max(
				document.body.scrollHeight,
				document.body.offsetHeight,
				document.body.clientHeight,
				document.documentElement.scrollHeight,
				document.documentElement.offsetHeight,
				document.documentElement.clientHeight
			);

			// Calculate the maximum scroll offset in each direction. Since you can only
			// scroll the overflow portion of the document, the maximum represents the
			// length of the document that is NOT in the viewport.
			var maxScrollX = ( documentWidth - viewportWidth );
			var maxScrollY = ( documentHeight - viewportHeight );

			// As we examine the mousemove event, we want to adjust the window scroll in
			// immediate response to the event; but, we also want to continue adjusting
			// the window scroll if the user rests their mouse in the edge boundary. To
			// do this, we'll invoke the adjustment logic immediately. Then, we'll setup
			// a timer that continues to invoke the adjustment logic while the window can
			// still be scrolled in a particular direction.
			// --
			// NOTE: There are probably better ways to handle the ongoing animation
			// check. But, the point of this demo is really about the math logic, not so
			// much about the interval logic.
			(function checkForWindowScroll() {

				clearTimeout( timer );

				if ( adjustWindowScroll() ) {

					timer = setTimeout( checkForWindowScroll, 30 );

				}

			})();

			// Adjust the window scroll based on the user's mouse position. Returns True
			// or False depending on whether or not the window scroll was changed.
			function adjustWindowScroll() {

				// Get the current scroll position of the document.
				var currentScrollX = window.pageXOffset;
				var currentScrollY = window.pageYOffset;

				// Determine if the window can be scrolled in any particular direction.
				var canScrollUp = ( currentScrollY > 0 );
				var canScrollDown = ( currentScrollY < maxScrollY );
				var canScrollLeft = ( currentScrollX > 0 );
				var canScrollRight = ( currentScrollX < maxScrollX );

				// Since we can potentially scroll in two directions at the same time,
				// let's keep track of the next scroll, starting with the current scroll.
				// Each of these values can then be adjusted independently in the logic
				// below.
				var nextScrollX = currentScrollX;
				var nextScrollY = currentScrollY;

				// As we examine the mouse position within the edge, we want to make the
				// incremental scroll changes more "intense" the closer that the user
				// gets the viewport edge. As such, we'll calculate the percentage that
				// the user has made it "through the edge" when calculating the delta.
				// Then, that use that percentage to back-off from the "max" step value.
				var maxStep = 50;

				// Should we scroll left?
				if ( isInLeftEdge && canScrollLeft ) {

					var intensity = ( ( edgeLeft - viewportX ) / edgeSize );

					nextScrollX = ( nextScrollX - ( maxStep * intensity ) );

				// Should we scroll right?
				} else if ( isInRightEdge && canScrollRight ) {

					var intensity = ( ( viewportX - edgeRight ) / edgeSize );

					nextScrollX = ( nextScrollX + ( maxStep * intensity ) );

				}

				// Should we scroll up?
				if ( isInTopEdge && canScrollUp ) {

					var intensity = ( ( edgeTop - viewportY ) / edgeSize );

					nextScrollY = ( nextScrollY - ( maxStep * intensity ) );

				// Should we scroll down?
				} else if ( isInBottomEdge && canScrollDown ) {

					var intensity = ( ( viewportY - edgeBottom ) / edgeSize );

					nextScrollY = ( nextScrollY + ( maxStep * intensity ) );

				}

				// Sanitize invalid maximums. An invalid scroll offset won't break the
				// subsequent .scrollTo() call; however, it will make it harder to
				// determine if the .scrollTo() method should have been called in the
				// first place.
				nextScrollX = Math.max( 0, Math.min( maxScrollX, nextScrollX ) );
				nextScrollY = Math.max( 0, Math.min( maxScrollY, nextScrollY ) );

				if (
					( nextScrollX !== currentScrollX ) ||
					( nextScrollY !== currentScrollY )
					) {

					window.scrollTo( nextScrollX, nextScrollY );
					return( true );

				} else {

					return( false );

				}

			}

		}


		// I draw the grid and edge lines in the document so that it is clear where
		// scrolling will be initiated and with what intensity it is taking place.
		function drawGridLines() {

			var increment = 100;
			var incrementCount = 100;
			var maxDimension = ( increment * incrementCount );

			// Draw the boxes that make up the grid.
			for ( var x = 0 ; x < incrementCount ; x++ ) {
				for ( var y = 0 ; y < incrementCount ; y++ ) {

					var xOffset = ( x * increment );
					var yOffset = ( y * increment );

					var box = document.createElement( "span" );
					box.style.position = "absolute";
					box.style.top = ( yOffset + "px" );
					box.style.left = ( xOffset + "px" );
					box.style.height = ( increment + "px" );
					box.style.width = ( increment + "px" );
					box.style.border = "1px solid #CCCCCC";
					box.style.font = "11px sans-serif";
					box.style.color = "#999999" ;
					box.style.boxSizing = "border-box";
					box.style.padding = "5px 5px 5px 5px";
					box.innerText = ( xOffset + ", " + yOffset );
					document.body.appendChild( box );

				}
			}

			// Draw the edges that delineate the scrolling zone.
			var edge = document.createElement( "span" );
			edge.style.position = "fixed";
			edge.style.top = ( edgeSize + "px" );
			edge.style.bottom = ( edgeSize + "px" );
			edge.style.left = ( edgeSize + "px" );
			edge.style.right = ( edgeSize + "px" );
			edge.style.border = "2px solid #CC0000";
			edge.style.borderRadius = "5px 5px 5px 5px";
			document.body.appendChild( edge );

			// Add mouse-guard so that nothing is selectable.
			var guard = document.createElement( "div" );
			guard.style.position = "fixed";
			guard.style.top = "0px";
			guard.style.bottom = "0px";
			guard.style.left = "0px";
			guard.style.right = "0px";
			document.body.appendChild( guard );

		}

	</script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>
	Automatically Scroll The Window When The User Approaches The Viewport Edge In JavaScript
	</title>
	</head>
	<body>

	<h1>
	Automatically Scroll The Window When The User Approaches The Viewport Edge In JavaScript
	</h1>

	<script type="text/javascript">

	var edgeSize = 200;
	var timer = null;

	window.addEventListener( "mousemove", handleMousemove, false );

	drawGridLines();

	// --------------------------------------------------------------------------- //
	// --------------------------------------------------------------------------- //

	// I adjust the window scrolling in response to the given mousemove event.
	function handleMousemove( event ) {

	// NOTE: Much of the information here, with regard to document dimensions,
	// viewport dimensions, and window scrolling is derived from JavaScript.info.
	// I am consuming it here primarily as NOTE TO SELF.
	// --
	// Read More: https://javascript.info/size-and-scroll-window
	// --
	// CAUTION: The viewport and document dimensions can all be CACHED and then
	// recalculated on window-resize events (for the most part). I am keeping it
	// all here in the mousemove event handler to remove as many of the moving
	// parts as possible and keep the demo as simple as possible.

	// Get the viewport-relative coordinates of the mousemove event.
	var viewportX = event.clientX;
	var viewportY = event.clientY;

	// Get the viewport dimensions.
	var viewportWidth = document.documentElement.clientWidth;
	var viewportHeight = document.documentElement.clientHeight;

	// Next, we need to determine if the mouse is within the "edge" of the
	// viewport, which may require scrolling the window. To do this, we need to
	// calculate the boundaries of the edge in the viewport (these coordinates
	// are relative to the viewport grid system).
	var edgeTop = edgeSize;
	var edgeLeft = edgeSize;
	var edgeBottom = ( viewportHeight - edgeSize );
	var edgeRight = ( viewportWidth - edgeSize );

	var isInLeftEdge = ( viewportX < edgeLeft );
	var isInRightEdge = ( viewportX > edgeRight );
	var isInTopEdge = ( viewportY < edgeTop );
	var isInBottomEdge = ( viewportY > edgeBottom );

	// If the mouse is not in the viewport edge, there's no need to calculate
	// anything else.
	if ( ! ( isInLeftEdge \|\| isInRightEdge \|\| isInTopEdge \|\| isInBottomEdge ) ) {

	clearTimeout( timer );
	return;

	}

	// If we made it this far, the user's mouse is located within the edge of the
	// viewport. As such, we need to check to see if scrolling needs to be done.

	// Get the document dimensions.
	// --
	// NOTE: The various property reads here are for cross-browser compatibility
	// as outlined in the JavaScript.info site (link provided above).
	var documentWidth = Math.max(
	document.body.scrollWidth,
	document.body.offsetWidth,
	document.body.clientWidth,
	document.documentElement.scrollWidth,
	document.documentElement.offsetWidth,
	document.documentElement.clientWidth
	);
	var documentHeight = Math.max(
	document.body.scrollHeight,
	document.body.offsetHeight,
	document.body.clientHeight,
	document.documentElement.scrollHeight,
	document.documentElement.offsetHeight,
	document.documentElement.clientHeight
	);

	// Calculate the maximum scroll offset in each direction. Since you can only
	// scroll the overflow portion of the document, the maximum represents the
	// length of the document that is NOT in the viewport.
	var maxScrollX = ( documentWidth - viewportWidth );
	var maxScrollY = ( documentHeight - viewportHeight );

	// As we examine the mousemove event, we want to adjust the window scroll in
	// immediate response to the event; but, we also want to continue adjusting
	// the window scroll if the user rests their mouse in the edge boundary. To
	// do this, we'll invoke the adjustment logic immediately. Then, we'll setup
	// a timer that continues to invoke the adjustment logic while the window can
	// still be scrolled in a particular direction.
	// --
	// NOTE: There are probably better ways to handle the ongoing animation
	// check. But, the point of this demo is really about the math logic, not so
	// much about the interval logic.
	(function checkForWindowScroll() {

	clearTimeout( timer );

	if ( adjustWindowScroll() ) {

	timer = setTimeout( checkForWindowScroll, 30 );

	}

	})();

	// Adjust the window scroll based on the user's mouse position. Returns True
	// or False depending on whether or not the window scroll was changed.
	function adjustWindowScroll() {

	// Get the current scroll position of the document.
	var currentScrollX = window.pageXOffset;
	var currentScrollY = window.pageYOffset;

	// Determine if the window can be scrolled in any particular direction.
	var canScrollUp = ( currentScrollY > 0 );
	var canScrollDown = ( currentScrollY < maxScrollY );
	var canScrollLeft = ( currentScrollX > 0 );
	var canScrollRight = ( currentScrollX < maxScrollX );

	// Since we can potentially scroll in two directions at the same time,
	// let's keep track of the next scroll, starting with the current scroll.
	// Each of these values can then be adjusted independently in the logic
	// below.
	var nextScrollX = currentScrollX;
	var nextScrollY = currentScrollY;

	// As we examine the mouse position within the edge, we want to make the
	// incremental scroll changes more "intense" the closer that the user
	// gets the viewport edge. As such, we'll calculate the percentage that
	// the user has made it "through the edge" when calculating the delta.
	// Then, that use that percentage to back-off from the "max" step value.
	var maxStep = 50;

	// Should we scroll left?
	if ( isInLeftEdge && canScrollLeft ) {

	var intensity = ( ( edgeLeft - viewportX ) / edgeSize );

	nextScrollX = ( nextScrollX - ( maxStep * intensity ) );

	// Should we scroll right?
	} else if ( isInRightEdge && canScrollRight ) {

	var intensity = ( ( viewportX - edgeRight ) / edgeSize );

	nextScrollX = ( nextScrollX + ( maxStep * intensity ) );

	}

	// Should we scroll up?
	if ( isInTopEdge && canScrollUp ) {

	var intensity = ( ( edgeTop - viewportY ) / edgeSize );

	nextScrollY = ( nextScrollY - ( maxStep * intensity ) );

	// Should we scroll down?
	} else if ( isInBottomEdge && canScrollDown ) {

	var intensity = ( ( viewportY - edgeBottom ) / edgeSize );

	nextScrollY = ( nextScrollY + ( maxStep * intensity ) );

	}

	// Sanitize invalid maximums. An invalid scroll offset won't break the
	// subsequent .scrollTo() call; however, it will make it harder to
	// determine if the .scrollTo() method should have been called in the
	// first place.
	nextScrollX = Math.max( 0, Math.min( maxScrollX, nextScrollX ) );
	nextScrollY = Math.max( 0, Math.min( maxScrollY, nextScrollY ) );

	if (
	( nextScrollX !== currentScrollX ) \|\|
	( nextScrollY !== currentScrollY )
	) {

	window.scrollTo( nextScrollX, nextScrollY );
	return( true );

	} else {

	return( false );

	}

	}

	}


	// I draw the grid and edge lines in the document so that it is clear where
	// scrolling will be initiated and with what intensity it is taking place.
	function drawGridLines() {

	var increment = 100;
	var incrementCount = 100;
	var maxDimension = ( increment * incrementCount );

	// Draw the boxes that make up the grid.
	for ( var x = 0 ; x < incrementCount ; x++ ) {
	for ( var y = 0 ; y < incrementCount ; y++ ) {

	var xOffset = ( x * increment );
	var yOffset = ( y * increment );

	var box = document.createElement( "span" );
	box.style.position = "absolute";
	box.style.top = ( yOffset + "px" );
	box.style.left = ( xOffset + "px" );
	box.style.height = ( increment + "px" );
	box.style.width = ( increment + "px" );
	box.style.border = "1px solid #CCCCCC";
	box.style.font = "11px sans-serif";
	box.style.color = "#999999" ;
	box.style.boxSizing = "border-box";
	box.style.padding = "5px 5px 5px 5px";
	box.innerText = ( xOffset + ", " + yOffset );
	document.body.appendChild( box );

	}
	}

	// Draw the edges that delineate the scrolling zone.
	var edge = document.createElement( "span" );
	edge.style.position = "fixed";
	edge.style.top = ( edgeSize + "px" );
	edge.style.bottom = ( edgeSize + "px" );
	edge.style.left = ( edgeSize + "px" );
	edge.style.right = ( edgeSize + "px" );
	edge.style.border = "2px solid #CC0000";
	edge.style.borderRadius = "5px 5px 5px 5px";
	document.body.appendChild( edge );

	// Add mouse-guard so that nothing is selectable.
	var guard = document.createElement( "div" );
	guard.style.position = "fixed";
	guard.style.top = "0px";
	guard.style.bottom = "0px";
	guard.style.left = "0px";
	guard.style.right = "0px";
	document.body.appendChild( guard );

	}

	</script>

	</body>
	</html>