CODEWITHSUNDEEP
javascriptjquery
user2483213
user2483213

Reputation: 331

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

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!

Upvotes: 2

Views: 11795

Answers (2)

Victor Isaikin
Victor Isaikin

Reputation: 91

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

Upvotes: 0

Wez
Wez

Reputation: 10712

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/

Upvotes: 2

Related Questions