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

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

• javascript
• jquery

Share Improve this question Follow edited Dec 16, 2013 at 14:17 SparK 5,21122 gold badges2525 silver badges3232 bronze badges asked Dec 16, 2013 at 14:06 user2483213user2483213 33111 gold badge33 silver badges1515 bronze badges 2

• 1 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 Commented Dec 16, 2013 at 14:13
• 1 possible duplicate of Check if element is visible after scrolling – MarkP Commented Dec 16, 2013 at 14:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 pletely visible. but the logic is there - http://jsfiddle/VJ3QC/9/

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