Как найти текущий идентификатор элемента div в прокручиваемом контейнере

Question

У нас есть div с фиксированным размером с автозаменами прокрутки, внутри него у нас есть еще один div больше родительского (обертки) и внутри него, больше элементов div (см. Пример)

Есть ли готовое решение найти идентификатор элемента div в позиции, которую мы прокрутили?

<div id="main"> 
    <div id="content"> 
     <div id="1" class="inner-content">1</div> 
     <div id="2" class="inner-content">2</div> 
     <div id="3" class="inner-content">3</div> 
     <div id="4" class="inner-content">4</div> 
     <div id="5" class="inner-content">5</div> 
     <div id="6" class="inner-content">6</div> 
     <div id="7" class="inner-content">7</div> 
     <div id="8" class="inner-content">8</div> 
    </div> 
</div> 

#main { 
    width: 700px; 
    height: 400px; 
    border: 1px solid black; 
    overflow: auto; 
} 
#content { 
    width: 10000px; 
    height: 10000px; 
    overflow: hidden; 
} 

.inner-content { 
    width: 900px; 
    height: 300px; 
    border: 1px solid black; 
    display: inline-block; 
} 

jsfiddle.net/VJ3QC/4/

Например, я прокручиваюсь прямо на сНе элемента с идентификатором 4, можно вернуться с JavaScript или JQuery, идентификатором этого элемента? После этого я прокрутил влево на элементе с id 7, могу ли я вернуть идентификатор этого элемента?

Thx!

Answer 1

Если каждый из ваших делений inner-content будет иметь одинаковую ширину, вы можете определить, какая из них видна с использованием свойства/функции offset(), когда пользователь прокручивает элемент.

Что-то вроде этого ..

var prev_id; 

$('#main').scroll(function(){ 

    var element_width = 400; 
    var offset = $('#content').offset(); 
    var positive = Math.abs(offset.left) 
    var divided = positive/element_width; 
    var round = Math.round(divided); 

    var current_element = $('#content').children().eq(round); 
    var id = current_element.attr('id'); 

    if(id != prev_id){ 
     prev_id = id; 
     alert(id); 
    } 

}); 

Маленький prev_id вар и if заявление просто сделать так, чтобы она только alerts раз, когда изменяется идентификатор.

Пример не идеален, так как есть поля и границы, которые означают, что идентификатор изменяется до того, как элемент полностью виден. но существует логика - http://jsfiddle.net/VJ3QC/9/