固定覆盖 - 滚动顶部不解决 div

Question

短篇小说： 当您按下链接时，我有一个溢出/灯箱 div（有点像 behance 或 pinterest）弹出窗口。我现在确定灯箱内部的滚动顶部。但是JS没有看到。有什么建议吗？

在铬！

长篇大论：

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 内看不到滚动顶部！ 有什么建议吗？

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