jquery - 固定覆盖 - scrolltop 不解决 div

Question

短篇小说:当您按下链接时，我有一个溢出/灯箱 div(有点像 behance 或 pinterest)弹出窗口。我现在如何确定灯箱内部的滚动条。但是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/

如您在蓝色框内所见 - 浏览器看不到固定 div 内的 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