如何在滾動容器上查找當前div元素的標識

我們有一個帶滾動自動的固定大小的div，裏面有另一個大於父級（包裝）的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格元素，是有可能恢復，JavaScript或JQuery的，這個元素的id？之後，我用id 7滾動左邊的元素，我可以返回這個元素的ID嗎？

Thx！

來源

2013-12-16 user2483213

和HTML 4的官方規格不允許號開始的ID值。你大概不會在野外遇到任何問題，因爲大多數瀏覽器都會對這些事情放任自流，但沒有理由不會更具描述性。 – Blazemonger

[檢查元素在滾動後是否可見]的可能重複（http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling） – MarkP

如果您的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聲明只是讓這個只alerts的ID發生變化時一次。

的例子是不完美的，因爲有利潤，這意味着標識的改變之前的元素是完全可見的邊界。但邏輯是存在的 - http://jsfiddle.net/VJ3QC/9/

來源

2013-12-16 14:52:47 Wez

如何在滾動容器上查找當前div元素的標識

回答

相關問題