Question

我们有一个固定大小的div和滚动自动，在它里面我们有另一个比父（包装器）大的div，里面有更多的div元素（见例子）

是否有一个现成的解决方案可以在我们滚动到的位置找到div元素的id？

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

例如，我在id为4的div元素上滚动，是否可以使用JavaScript或JQuery返回此元素的id？之后我向左滚动了id为7的元素，我可以返回这个元素的id吗？

THX！

Answer 1

如果您的每个inner-content div总是具有相同的宽度，那么当用户滚动元素时，您可以使用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 var和if语句只是在ID更改时才会alerts一次。

示例并不完美，因为有边距和边框意味着在元素完全可见之前id会发生变化。但逻辑是 - http://jsfiddle.net/VJ3QC/9/

Answer 2

很容易。只需使用我的代码。滚动时，将确定每个元素，然后将“活动”类设置为当前元素。

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

如何在滚动容器中查找当前div元素的id

2 个答案: