スクロール可能なdivの可視領域にあるすべての入力要素を見つける

Question

私は500行ある固定サイズのスクロール可能なdivを持っています。各行には、入力、テキストエリア、選択エレメントの6つの列があります。

すべての入力要素を選択する代わりに、画面に現在表示されているすべての入力要素（divのビューポートにある入力要素）を探したいとします。

たとえば、 Iは、アイテム320上と私は350点で最大の要素を見ることができれば、私はここでは、その範囲内に

を入力要素を選択する必要がスクロールボックスに1行のバージョンをトリミングする：

<tbody> 
    <tr> 
     <td> 
      <input id="prm_1_1_1_100" type="checkbox" value="" name="checkbox" style="display: none;"> 
     </td> 
     <td> 
      <span id="dsp_1_1_2_2"></span> 
     </td> 
     <td> 
      <input id="dsp_1_1_1_5" type="text" value="" maxlength="16" minlength="16" required="true" data-allow="alphanumeric"> 
     </td> 
     <td> 
      <input id="dsp_1_1_1_6" type="text" value="" maxlength="500" required="true"> 
     </td> 
     <td> 
      <input id="dsp_1_1_1_7" type="text" value="" required="true" data-max-date="today" data-toggle="datepicker" class="hasDatepicker"> 
     </td> 
     <td> 
      <input id="dsp_1_1_1_8" type="text" value="" maxlength="20" data-allow="toFixedDecimal"> 
     </td> 
     <td> 
      <input id="dsp_1_1_1_9" type="text" value="" data-allow="toFixedDecimal"> 
     </td> 
     <td> 
      <textarea id="dsp_1_1_1_22" rows="1" cols="20" required="true" onkeyup="javascript: getVals(this, 'textarea');"></textarea> 
     </td> 
     <td> 
      <select id="dsp_1_1_1_23"> 
       <option value="RLB" selected="selected">RLB</option> 
       <option value="CLB">CLB</option> 
      </select> 
     </td> 
     <td> 
      <select id="dsp_1_1_1_14" disabled="disabled"> 
       <option value="Open" selected="selected">Open</option> 
       <option value="Drop">Drop</option> 
       <option value="MAP">MAP</option> 
       <option value="Carry Over"> Carry Over</option> 
      </select> 
     </td> 
     <td> 
      <input id="dsp_1_1_1_15" type="text" value="" disabled="disabled" class="width-80"> 
     </td> 
     <td> 
      <input id="dsp_1_1_1_16" type="text" value="" disabled="disabled" class="width-80"> 
     </td> 
    </tr> 
</tbody> 

Answer 1

あなたは、フィルタリングすることができそれぞれの行のトップ位置にscrollTopの相対位置によって：

function getElements ($scroll) { 
    var viewportStart = $scroll.scrollTop(); 
    var viewportEnd = viewportStart + $scroll.height(); 

    return $scroll.find('tr, .row').filter(function() { 
     var $row = $(this); 
     var rowTop = $row.position().top; 
     return rowTop >= viewportStart && rowTop <= viewportEnd; 
    }); 
}; 

var $container = $('div.scroll'); // $('table') 

getElements($container).css('backgroundColor', '#00f'); 

Answer 2

あなたはこれを行うためのjQueryプラグインを作成することができます！

範囲の開始は、先頭の位置ではなくオフセットである必要があります。

注：全ページに複数の行を参照するには、以下のコードスニペットでボタンをヒットすることを確認します。

(function($) { 
 
    $.fn.findVisibleScroll = function(config) { 
 
    var defaults = { selector : '' }; 
 
    if (!$.isPlainObject(config)) config = { selector : config }; 
 
    config = $.extend(true, defaults, config || {}); 
 
    var viewRangeStart = $(this).offset().top; 
 
    var viewRangeEnd = viewRangeStart + this.height(); 
 
    return this.find(config.selector).filter(function() { 
 
     var eleTop = $(this).offset().top; 
 
     var eleBottom = eleTop + $(this).height(); 
 
     return (eleBottom <= viewRangeEnd) && (eleTop >= viewRangeStart); 
 
    }); 
 
    }; 
 
})(jQuery); 
 

 
$(function() { 
 
    for (var row = 0; row < 500; row++) { 
 
    var $row = $('<tr>').appendTo($('table').first().append($('<tbody>'))); 
 
    for (var col = 0; col < 6; col++) { 
 
     $('<td>').append($('<input>', { placeholder : row + ' x ' + col })).appendTo($row); 
 
    } 
 
    } 
 
}); 
 

 
$('.select-btn').on('click', function() { 
 
    $('.viewport-half-vertical').find('tr').removeClass('selected'); 
 
    $('.viewport-half-vertical').findVisibleScroll('tr').addClass('selected'); 
 
});

body { 
 
    padding: 0.5em; 
 
} 
 
h1 { 
 
    font-size: 2em; 
 
    margin: 0.5em 0; 
 
    font-weight: bolder; 
 
} 
 
.scrollable { 
 
    overflow: scroll; 
 
} 
 
.viewport-half-vertical { 
 
    max-height: 50vh; 
 
    width: 100%' 
 
} 
 
.viewport-half-vertical table { 
 
    border-spacing: 0.125em; 
 
    border-collapse: separate; 
 
} 
 
.viewport-half-vertical table td { 
 
    padding: 0.0625em; 
 
    text-align: center; 
 
} 
 
.viewport-half-vertical table input { 
 
    width: 99%; 
 
    text-align: center; 
 
} 
 
.selected { 
 
    background: #AAF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Select Elements in Viewport</h1> 
 
<div class="viewport-half-vertical scrollable"> 
 
    <table></table> 
 
</div> 
 
<button class="select-btn">Select Visible</button>