解释为什么scrollTop的（）总是在这里返回0

问题描述：

见http://codepen.io/anon/pen/NGqPNz 解释为什么scrollTop的（）总是在这里返回0

CSS：

html { 
    height: 100%; 
    overflow-y: hidden; 
} 
body { 
    height: 100%; 
    overflow-y: auto; 
}

JS：

$('body').bind("scroll", function() { 
    if ($('body').scrollTop()) { 
     console.log('triggered!'); 
    } else { 
     console.log($('body').scrollTop()); 
    } 
    });

滚动事件body元素的射击。滚动条位于body元素上，而不是html或window元素。那么为什么document.body.scrollTop或$（'body'）。scrollTop（）返回0？

有没有什么办法可以检测到滚动条的位置，或者我卡住了，如果我想使用高度：100％; overflow：隐藏在html元素上？

谢谢！

我认为这是一个错误的WebKit。适用于Firefox。 https://code.google.com/p/chromium/issues/detail?id=423935 – Shikkediel

谢谢！我将body设置为overflow -y hidden，并添加了一个高度为100和overflow-y auto的包装div，并且scroll事件/ scrollTop在div上工作。 – tdj

答

这是因为你有overflow-y: hidden;。删除这个，然后scrollTop()将工作

头脑风暴，我实际上有overflow-x：隐藏.... –

答

感谢Shikkediel的评论，它似乎是一个Webkit的错误。如果你立即在体内放置一个div，并将scroll事件绑定到div，它就可以工作。

http://codepen.io/anon/pen/bVderq

CSS：

html { 
    height: 100%; 
    overflow-y: hidden; 
} 
body { 
    height: 100%; 
    overflow-y: hidden; 
} 
.scroll-wrapper { 
    height: 100%; 
    overflow-y: auto; 
}

JS：

$('.scroll-wrapper').bind("scroll", function() { 
    if ($('.scroll-wrapper').scrollTop()) { 
    console.log('triggered!'); 
    console.log($('.scroll-wrapper').scrollTop()); 
    } else { 
    console.log($('.scroll-wrapper').scrollTop()); 
    } 
});

解释为什么scrollTop的（）总是在这里返回0

相关推荐