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

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

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

第10行-CSS:

溢出：自动

如果我删除此样式，它将完美工作：

（没有溢出）
造成问题的不是溢出。。这是最重要的

.快照内容{
位置：绝对；}

这就是问题所在。当我移除它时，它工作了

问题是

$（窗口）。滚动（函数（）{}）

当我滚动时不会触发，可能是因为元素是绝对的，所以它在屏幕上保持原始位置而不改变它。将其设置为相对，它就会工作。
问题是您的
窗口不再滚动。相反，您的
.snap内容是。因此，您需要将
滚动
处理程序更改为该元素。然后，您还必须稍微修改计算以使用此新设置：


函数是crolledintoview（elem）{
var docViewTop=0；
var docViewBottom=$（“.snap content”）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemTop=docViewTop））；
}
$（“.snap content”）.scroll（函数（）{
/* ... */

请注意，如果滚动框没有填满整个屏幕，您的计算将变得相当复杂，因为您需要确定元素是否在其框内可见，以及框的该部分是否在屏幕上可见。
因此，也许此代码会给我带来长期问题？在您回答后，我想n添加一个新的快照内容类，但目前它似乎也适用于@James Montagne答案。无论如何，感谢您的时间，我真的很感谢！
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 () {
    /* ... */