溢出隐藏内容(滚动时应显示)

Question

我正在一个使用snap.js和chart.js的网站上工作。

演示JSFIDDLE

在添加JavaScript以在用户滚动时显示来自chart.js的内容后，似乎出现了以下样式的问题：

第10行- CSS：overflow: auto;

如果我删除这种样式，它就完美地工作了：

DEMO2 JSFIDDLE (无溢出)

Answer 1

问题是您的window不再滚动。相反，您的.snap-content是。因此，您需要将scroll处理程序更改为该元素。然后，您还必须对计算进行一些修改，以便使用此新设置：

http://jsfiddle.net/MU9aw/27/

function isScrolledIntoView(elem) {
    var docViewTop = 0;
    var docViewBottom = $(".snap-content").height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(".snap-content").scroll(function () {
    /* ... */

请注意，如果滚动框没有填充整个屏幕，计算将变得非常复杂，因为您需要确定元素在其框内是否可见，以及屏幕上可见的框部分。

Answer 2

不是溢出使问题..。这是

..snap内容{位置:绝对；}

这就是问题所在。当我移除它的时候，它就起作用了！

问题是

$(窗口).scroll(函数() {})；

当我滚动时不会触发，可能是因为元素是绝对的，所以它在屏幕上保持原来的位置而不改变它。把它交给亲戚，它就能工作了。