How to select visible elements in scrolling list

Question

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

im guessing the user asks for the elements that are currently in view? As opposed to those outside the scrolling area. The question is wheter half-visible elements should be chosen also. — BobbyTables, Sep 14 '15 at 09:50
@skriming Check this [Demo](https://jsfiddle.net/tusharj/stb0sd71/2/) — Tushar, Sep 14 '15 at 10:00
@Tushar thank you. this work for me good! you can create answer if u want. — pgrekovich, Sep 14 '15 at 10:04

score 2 · Answer 1 · edited May 23 '17 at 12:25

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.net/vas840kr/

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

score 2 · Accepted Answer · edited May 23 '17 at 12:09

Tweaked my other answer

Demo

See comments 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.com/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>

score 0 · Answer 3 · answered Sep 14 '15 at 09:49

0

I think this will help you:

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

answered Sep 14 '15 at 09:49

Ionut Necula

11,107
4
45
69

But you know. There's two of them. How would you not know?! – Ionut Necula Sep 14 '15 at 09:52
This simple example mate :) – pgrekovich Sep 14 '15 at 09:56

score 0 · Answer 4 · answered Sep 14 '15 at 09:55

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.

score 0 · Answer 5 · answered Sep 14 '15 at 13:12

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

https://jsfiddle.net/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;  
    }

})()

How to select visible elements in scrolling list

5 Answers5