Question

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

DEMO JSFIDDLE

在用户滚动时添加javascript以显示chart.js中的内容后，似乎遇到以下样式的麻烦：

第10行 - CSS：overflow: auto;

如果我删除这种风格，那就完美了：

DEMO2 JSFIDDLE（没有溢出）

Answer 1

问题不在于溢出..它是

.snap-content { 位置：绝对; }

提出了这个问题。当我删除它时，它可以工作！

问题是

$（window）.scroll（function（）{}）;

当我滚动时不会触发，因为因为元素是绝对的，所以它保持屏幕中的原始位置而不更改它。把它做成亲戚，它会起作用。

Answer 2

问题是您的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 () {
    /* ... */

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

溢出隐藏内容（滚动时应显示）

2 个答案: