Определить ID элемента, который в поле зрения (JS, jQuery)

Question

есть ли решение на JS или jQuery, которое определяет id элементов в поле зрения в обратно прокручиваемом блоке?

К примеру

<div class="group-container">
    <div id ="cell-1" class="group">Cell 1</div>
    <div id ="cell-2" class="group">Cell 2</div>
    <div id ="cell-3" class="group">Cell 3</div>
    <div id ="cell-4" class="group">Cell 4</div>
    <div id ="cell-5" class="group">Cell 5</div>
    <div id ="cell-6" class="group">Cell 6</div>
    <div id ="cell-7" class="group">Cell 7</div>
    <div id ="cell-8" class="group">Cell 8</div>
    <div id ="cell-9" class="group">Cell 9</div>
    <div id ="cell-10" class="group">Cell 10</div>
</div>

<style>
.group-container {
    overflow-y: scroll;
    height: 200px;
    width: 300px;
    transform: scaleY(-1);
}
.group {
    width: 100%;
    height: 50px;
    transform: scaleY(-1);
}
</style>

Необходимо определить id элемента, который находится в верхней части или же id всех элементов, который видны

Answer 1

Видны, в данном случае, - полностью видны. Если достаточно, чтобы виден был кусочек, то условие в filter можно поменять соответствующим образом.

const container = document.querySelector('.group-container');
const cells = [...container.querySelectorAll('.group')];
const text = document.getElementById('text');

const box = container.getBoundingClientRect();

container.addEventListener('scroll', isVisible);
window.addEventListener('resize', isVisible);
window.addEventListener('scroll', isVisible);
isVisible();

function isVisible(){
    let visibleCellIds = cells.filter(cell => {
        const cbox = cell.getBoundingClientRect();
        return cbox.top >= box.top && cbox.bottom <= box.bottom && cbox.top >= 0 && cbox.bottom <= window.innerHeight;
    }).map(c => c.getAttribute('id'));
    
    text.innerHTML = `Видны: ${visibleCellIds.join(',')}.<br> Верхний: ${visibleCellIds[visibleCellIds.length-1]}`;
}

<div class="group-container">
    <div id ="cell-1" class="group">Cell 1</div>
    <div id ="cell-2" class="group">Cell 2</div>
    <div id ="cell-3" class="group">Cell 3</div>
    <div id ="cell-4" class="group">Cell 4</div>
    <div id ="cell-5" class="group">Cell 5</div>
    <div id ="cell-6" class="group">Cell 6</div>
    <div id ="cell-7" class="group">Cell 7</div>
    <div id ="cell-8" class="group">Cell 8</div>
    <div id ="cell-9" class="group">Cell 9</div>
    <div id ="cell-10" class="group">Cell 10</div>
</div>

<div id="text" style="position: fixed; right:0; top:0"></div>

<style>
.group-container {
    overflow-y: scroll;
    height: 200px;
    width: 300px;
    transform: scaleY(-1);
}
.group {
    width: 100%;
    height: 50px;
    transform: scaleY(-1);
    border: solid 1px red;
    box-sizing: border-box;
}
</style>

БЛОГ НА HUSL

Определить ID элемента, который в поле зрения (JS, jQuery)

Ответы (1 шт):