Question

有没有办法影响看不见的div？例如：当您向下滚动页面并且div不再可见时。

我有一个嵌入式youtube视频，我想只在视频不再可见时才将其静音。

Answer 1

这会使每个不可见的视频播放器静音：

$(function() {
    var $w = $(window), oldw = 0, oldh = 0, oldt = 0;

    function checkVideoVisible() {
        if (oldw !== $w.width() || oldh !== $w.height() ||
                oldt !== $w.scrollTop()) {
            oldw = $w.width();
            oldh = $w.height();
            oldt = $w.scrollTop();
            var top = oldt, bottom = oldt + oldh;
            $("video").each(function() {
                var $this = $(this);
                if ($this.offset().top + $this.height() >= top &&
                        $this.offset().top < bottom) {
                    $this.prop("muted", false);
                } else {
                    $this.prop("muted", true);
                }
            });
        }
    }

现在要触发检查，您可以使用计时器：

    var timerId = setInterval(checkVideoVisible, 200);
}

或处理滚动事件：

    $w.on("scroll", checkVideoVisible);
}

在后一种情况下，您还需要在对dom进行任何更改时执行检查。

Answer 2

使用它作为它可能是你最好的选择，我猜猜你;没有发布预编写的lib会帮助你的代码

JQ Visible Lib

要实现，您需要为元素指定一个id，并在脚本标记或js文件中引用它，如下所示：

如果可见，

$('#element').visible()将返回true。

然后，您可以添加该部分以根据该状态静音/暂停视频。

在看不见时影响div？

2 个答案: