codehooligans · November 25, 2012 16:45 · elvisortiz16 · Nov 16, 2018
diff --git a/gistfile1.js b/gistfile1.js
 <html dir="ltr" lang="en-US">
 <head>
 	<meta charset="UTF-8" />
 	<title>Scroll tester</title>
 	<style type="text/css">
 		#scroll-box { margin-top: 100px; width: 100%; background-color: #666bea; font-family: Arial, Helvetica, sans-serif;font-size: 12px;; } 
 		#scroll-box div.scroll-messages-list { position: relative; height:250px; overflow: auto; background-color: #FFFFFF; border:1px solid #CCCCCC; }
 		#scroll-box div.scroll-messages-list div.row { position: relative; background-color:#FFFFFF; border:1px solid #CCCCCC; height: 100px;}
 		#scroll-box div.scroll-messages-list div.row span.message { color:#000000; } 
 	</style>
 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 	<script type="text/javascript">
 		jQuery(document).ready(function($){
 			update_container_info();

 			var container 				= jQuery('#scroll-box .scroll-messages-list');
 			container.scroll(update_container_info);
 		});			
 		
 		function update_container_info() {
 			var visible_rows = [];
 			
 			var container 				= jQuery('#scroll-box .scroll-messages-list');
 			var c_height 				= container.height();
 			var c_scrollTop 			= container.scrollTop();
 			jQuery('span#container-scrollTop').html(c_scrollTop);				
 			jQuery('span#container-height').html(c_height);
 			
 			jQuery('.row').each(function() {

 				var row_id 				= jQuery(this).attr('id');
 				var r_position			= jQuery(this).position();
 				var r_height			= jQuery(this).outerHeight();
 				var r_position_top 		= r_position.top;
 				var r_position_bottom 	= r_position.top + r_height;
 				
 				// Uncomment the lines 91-103 to see the individual row debug info				
 				jQuery('span#'+row_id+'-position-top').html(r_position_top);
 				jQuery('span#'+row_id+'-position-bottom').html(r_position_bottom);
 				jQuery('span#'+row_id+'-height').html(r_height);	

 				// Simple compare. 
 				// If the row bottom is less than 0 then the user has scrolled past that item. 
 				// If the row top is greater than the container height then the row is still below the scroll
 				if ((r_position_bottom < 0)	// zero is the top of the container
 				 || (r_position_top > c_height)) {
 					jQuery('span#'+row_id+'-visible').html('');	
 				} else {
 					jQuery('span#'+row_id+'-visible').html('Y');						
 					visible_rows[visible_rows.length] = row_id;
 				}
 			});		
 			
 			// Display the visible rows. 
 			jQuery('span#row-selected').html('');
 			var row_select_display = '';
 			for (idx in visible_rows) {
 				if (row_select_display.length) row_select_display += ', ';
 				row_select_display += ' '+visible_rows[idx];
 			}
 			jQuery('span#row-selected').html(row_select_display);
 				
 		}
 	</script>
 </head>
 <body>
 	<?php $number_rows = 26; ?>
 	<div id="scroll-box" class="scroll-box">
 		<div id="scroll-messages-list" class="scroll-messages-list">
 			<?php
 				$cnt = 1;
 				while($cnt < $number_rows) {
 					?>
 					<div id="row-<?php echo $cnt; ?>" class="row" style="height: <?php echo rand(75, 150); ?>px;">
 						<span class="message">row <?php echo $cnt; ?></span>
 					</div>
 					<?php
 					$cnt += 1;
 					
 				}
 			?>

 		</div>
 	</div>
 	<p><strong>Container:</strong><br />
 		scrollTop: <span id="container-scrollTop">0</span><br />
 		height: <span id="container-height">0</span></p>

 	<p><strong>Selected:</strong><br />
 		<span id="row-selected"></span></p>
 <?php  ?>
 	<p><strong>Rows:</strong><br />
 		<?php
 			$cnt = 1;
 			while($cnt < $number_rows) {
 				?>
 				row-<?php echo $cnt; ?> Position:[<span id="row-<?php echo $cnt; ?>-position-top">0</span>][<span 
 					id="row-<?php echo $cnt; ?>-position-bottom">0</span>] Height: [<span id="row-<?php echo $cnt; ?>-height"></span>] Visible:[<span id="row-<?php echo $cnt; ?>-visible"></span>]<br /><?php
 				$cnt += 1;
 			}
 		?>
 	</p>
 <?php  ?>	
 </div>
 </body>
 </html>
	<html dir="ltr" lang="en-US">
	<head>
	<meta charset="UTF-8" />
	<title>Scroll tester</title>
	<style type="text/css">
	#scroll-box { margin-top: 100px; width: 100%; background-color: #666bea; font-family: Arial, Helvetica, sans-serif;font-size: 12px;; }
	#scroll-box div.scroll-messages-list { position: relative; height:250px; overflow: auto; background-color: #FFFFFF; border:1px solid #CCCCCC; }
	#scroll-box div.scroll-messages-list div.row { position: relative; background-color:#FFFFFF; border:1px solid #CCCCCC; height: 100px;}
	#scroll-box div.scroll-messages-list div.row span.message { color:#000000; }
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function($){
	update_container_info();

	var container = jQuery('#scroll-box .scroll-messages-list');
	container.scroll(update_container_info);
	});

	function update_container_info() {
	var visible_rows = [];

	var container = jQuery('#scroll-box .scroll-messages-list');
	var c_height = container.height();
	var c_scrollTop = container.scrollTop();
	jQuery('span#container-scrollTop').html(c_scrollTop);
	jQuery('span#container-height').html(c_height);

	jQuery('.row').each(function() {

	var row_id = jQuery(this).attr('id');
	var r_position = jQuery(this).position();
	var r_height = jQuery(this).outerHeight();
	var r_position_top = r_position.top;
	var r_position_bottom = r_position.top + r_height;

	// Uncomment the lines 91-103 to see the individual row debug info
	jQuery('span#'+row_id+'-position-top').html(r_position_top);
	jQuery('span#'+row_id+'-position-bottom').html(r_position_bottom);
	jQuery('span#'+row_id+'-height').html(r_height);

	// Simple compare.
	// If the row bottom is less than 0 then the user has scrolled past that item.
	// If the row top is greater than the container height then the row is still below the scroll
	if ((r_position_bottom < 0) // zero is the top of the container
	\|\| (r_position_top > c_height)) {
	jQuery('span#'+row_id+'-visible').html('');
	} else {
	jQuery('span#'+row_id+'-visible').html('Y');
	visible_rows[visible_rows.length] = row_id;
	}
	});

	// Display the visible rows.
	jQuery('span#row-selected').html('');
	var row_select_display = '';
	for (idx in visible_rows) {
	if (row_select_display.length) row_select_display += ', ';
	row_select_display += ' '+visible_rows[idx];
	}
	jQuery('span#row-selected').html(row_select_display);

	}
	</script>
	</head>
	<body>
	<?php $number_rows = 26; ?>
	<div id="scroll-box" class="scroll-box">
	<div id="scroll-messages-list" class="scroll-messages-list">
	<?php
	$cnt = 1;
	while($cnt < $number_rows) {
	?>
	<div id="row-<?php echo $cnt; ?>" class="row" style="height: <?php echo rand(75, 150); ?>px;">
	<span class="message">row <?php echo $cnt; ?></span>
	</div>
	<?php
	$cnt += 1;

	}
	?>

	</div>
	</div>
	<p><strong>Container:</strong><br />
	scrollTop: <span id="container-scrollTop">0</span><br />
	height: <span id="container-height">0</span></p>

	<p><strong>Selected:</strong><br />
	<span id="row-selected"></span></p>
	<?php ?>
	<p><strong>Rows:</strong><br />
	<?php
	$cnt = 1;
	while($cnt < $number_rows) {
	?>
	row-<?php echo $cnt; ?> Position:[<span id="row-<?php echo $cnt; ?>-position-top">0</span>][<span
	id="row-<?php echo $cnt; ?>-position-bottom">0</span>] Height: [<span id="row-<?php echo $cnt; ?>-height"></span>] Visible:[<span id="row-<?php echo $cnt; ?>-visible"></span>]<br /><?php
	$cnt += 1;
	}
	?>
	</p>
	<?php ?>
	</div>
	</body>
	</html>