I need to select elements currently visible (and in view) in scrolling list. In my list I have a table. Example:

<div class='list'>
<table>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>        
</table>

I want to only choose those elements that are now in visible to the user (ie. on the screen, not off screen)

On JsFiddle: jsfiddle

I need to select elements currently visible (and in view) in scrolling list. In my list I have a table. Example:

<div class='list'>
<table>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>
    <tr>
        <td>item</td>
    </tr>        
</table>

I want to only choose those elements that are now in visible to the user (ie. on the screen, not off screen)

On JsFiddle: jsfiddle

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 16, 2017 at 9:54 Ionut Necula 11.5k44 gold badges4949 silver badges7272 bronze badges asked Sep 14, 2015 at 9:44 pgrekovichpgrekovich 13711 silver badge99 bronze badges 12

• THis is working what is the problem? – guradio Commented Sep 14, 2015 at 9:48
• all elements are visible – Amit Soni Commented Sep 14, 2015 at 9:49
• No, this select all elements in table, not only visible. – pgrekovich Commented Sep 14, 2015 at 9:49
• 1 what if any element is half visible ?? – Amit Soni Commented Sep 14, 2015 at 9:53
• 2 @skriming Check this Demo – Tushar Commented Sep 14, 2015 at 10:00

 |  Show 7 more ments

5 Answers 5

Sorted by: Reset to default 2

Tweaked my other answer

Demo

See ments inline in the code.

$(document).ready(function() {
  // Get viewport height, gridTop and gridBottom
  var gridTop = 0,
    gridBottom = $('.list').outerHeight();

  $('.list').on('scroll', function() {
    // On each scroll check if `td` is in interested viewport
    $('.list td').each(function() {
      var thisTop = $(this).offset().top;

      // Check if this element is in the interested viewport
      if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
        $(this).css('background', 'red');
      } else {
        $(this).css('background', 'gray');
      }
    });
  });
});

.list {
  height: 112px;
  width: 300px;
  display: block;
  overflow-y: scroll;
}
table tr td {
  width: 300px;
  height: 50px;
  background-color: gray;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class='list'>
  <table>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
    </tr>
  </table>
</div>

The accepted answer here provides a function to detect if an element is within scrollable view, iterate you elements and check against the function

Check if element is visible after scrolling

EDIT: with some adjustment this code works (it could be refactored, but shows the concept): https://jsfiddle/vas840kr/

var $window = $(".list");
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height() + 5;

I think this will help you:

$('tr:first-child td, tr:nth-child(2) td').css('background', 'red');

I figure you're going to want to apply this to a dynamic number of td's. However, since there's no CSS selector to specifically target those elements 'hidden' from view due to overflow clipping, you'll have to use javascript to reach those elements or their inverse, in-view siblings.

I made a pure JavaScript solution ("Vanilla JS"), as a branch of your question's jsfiddle. Maybe of interest for some readers:

https://jsfiddle/rplantiko/u2gLr64c/

(function(){

    var result = document.getElementById("result");
    var container = document.getElementById("container");
    var cells  = toArray(
       document.getElementsByTagName("td")
       );
    var isCellVisible = isChildElementVisible( container );

    container.addEventListener("scroll",determineVisibleRows);
    determineVisibleRows();

    function determineVisibleRows() {
      result.value =  
        cells.filter( isCellVisible ).map( rowIndex ).join(',');
      }

    function isChildElementVisible(container) {
      var containerHeight = parseInt(getComputedStyle(container).height);
      return function(element) {
        var containerTop = parseInt( container.scrollTop );
        var containerBottom = containerTop + containerHeight;
        var elemTop = element.offsetTop;
        var elemHeight =  parseInt(getComputedStyle(element).height);
        var elemBottom = elemTop + elemHeight;
        return (elemTop >= containerTop && 
                elemBottom <= containerBottom);
        }
     }

    function toArray(arraylikeObject) {
      return Array.prototype.slice.call( arraylikeObject, 0 )
    }

    function rowIndex( cell ) {
      return cell.parentNode.rowIndex+1;  
    }

})()