固定覆蓋 - scrolltop沒有處理div

Question

短故事： 當您按下鏈接時，我有一個overflow/lightbox div（類似behance或pinterest）彈出窗口。我現在要確定燈箱內部的scrolltop。但JS沒有看到它。有什麼建議？

in chrome！

長的故事：

CSS

html, body {width:100%; height:100%; overflow:auto;} 

.overflow { 
    display: none; 
    bottom: 0;right: 0;top: 0;left: 0; 
    margin: 0; 
    overflow-y: scroll; 
    position: fixed;  
    z-index: 999;} 


.inside{ 
    cursor: default; 
    z-index: 1000; 
    position: absolute; 
    background-color:yellow;} 

HTML

<div>this is a body text with <a href="#lightbox">lightbox trigger</a></div> 
<div class="overflow"> 
    <div class="inside"> 
     this is lightbox text<br/> 
     it scrolls while body stays fixed<br /> 
     I need to know how much it scrolled with scrollTop (or whatever!) 
    </div> 
</div> 

JS

$("a").click(function(){  
    $(".overflow").show(); 
    $("body").css("overflow", "hidden"); 
}); 

$(window).scroll(function(e){ 
    var x = $(".inside").scrollTop(); 
    console.log(x); //shows 0! 
}); 

我試圖組建一個非常簡易的jsfiddle http://jsfiddle.net/Q7XVL/2/

你看到藍色的盒子裏 - 瀏覽器看不到裏面scrollTop的固定格！ 有什麼建議嗎？

Answer 1

你實際上滾動正在被飛越.overflow，不.inside導致溢出

所以，你需要得到.overflow的scrollTop，而不是.inside

$(window).scroll(function(e){ 
    var scrolltop = $(window).scrollTop(); 
    var scrollinside = $(".overflow").scrollTop(); 
$("#console").html("body: "+scrolltop+"px; <br /> fixed div: "+scrollinside+"px"); 
}); 

Updated JSFiddle