How to find current div element's id on scrolling container

Question

We have a div with fixed size with scroll auto, inside it we have another div bigger than the parent (wrapper) and inside it, more div elements(See example)

Is there a ready solution to find the div element's id in the position we scrolled to?

<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/

For example I scrolled right on div element with id 4, is it possible to return, with JavaScript or JQuery, the id of this element? After that I scrolled left on element with id 7 can I return this element's id?

Thx!

The official spec for HTML 4 doesn't allow numbers to begin ID values. You probably won't run into any problems in the wild, since most browsers are permissive about such things, but there's no reason not to be more descriptive. — Blazemonger, Dec 16 '13 at 14:13
possible duplicate of [Check if element is visible after scrolling](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) — MarkP, Dec 16 '13 at 14:15

score 2 · Accepted Answer · answered Dec 16 '13 at 14:52

If each of your inner-content divs are always going to be the same width you could work out which one is visible using the offset() property/function when the user scrolls the element.

Something like this..

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);
    }

});

The little prev_id var and the if statement just make it so that it only alerts once when the id changes.

The example isn't perfect as there are margins and borders which mean the id changes before the element is completely visible. but the logic is there - http://jsfiddle.net/VJ3QC/9/

if i don't know height then how would i do? – Mohit Prakash Jul 01 '20 at 13:36 — Mohit Prakash, Jul 01 '20 at 13:36

Victor Isaikin · Answer 2 · 2019-05-14T08:25:01.323

It is easy. Just use my code. When you will scroll each element will be determined and then will set class "active" to current element .

scrollspy = function(settings) {
    var That = this;
        elS = [];
        Options = {
            class: "scrollspy",
            classActive: "active",
            paddingTop: 0, 
            infinity: false
        };
        Options.paddingTop = window.innerHeight - Options.paddingTop;
        Object.assign(Options, settings);

    $(document).find('.'+Options.class).each(function(e) {
      elS.push($(this)[0]);
    });

    $(document).on('scroll', function(){
      if(Options.infinity){
        $('.'+Options.class+'.'+Options.classActive).removeClass(Options.classActive);
      }

      for(var i=0; i<elS.length; i++){
        if($(this).scrollTop() + Options.paddingTop >= That.elS[i].offsetTop && $(this).scrollTop() <= (That.elS[i].offsetTop + That.elS[i].offsetHeight)){
          if(!$(That.elS[i]).hasClass(Options.classActive)){
            $(That.elS[i]).addClass(Options.classActive);
          }
        }
      }
    });

  }
  scrollspy();

How to find current div element's id on scrolling container

2 Answers2