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

所以你需要获得scrollTop .overflow代替.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

固定叠加 - scrolltop不会解决div

1 个答案: