Question

我想只在HTML文档的一部分可见时才继续执行特定的javascript函数。这意味着当该部分再次不可见时停止执行功能。

退出可见范围意味着元素已经过了：

向外滚动（垂直或水平）
更改为其他浏览器标签
关闭标签/窗口/整个浏览器。

示例代码：我有一个样式的HTML，以确保我在我的屏幕（1920 X 1080）可见范围之下有div main（整页）和div目标：

<html>
<head>
    <title>Title</title>
<style type="text/css">
    #main{
        height: 2300px;
    }
    .target{
        border: 1px solid black;
        position: relative;
        top:1000px;
        width:150px;
        height: 150px;
    }
</style>
<script scr="js/jquery.js"></script>
</head>
<body>
    <div id="main">
        <div class="target"></div>
    </div>
</body>
</html>

将订购的JS / Jquery代码是什么：

当div.target当前可见时触发执行my_function（）

当div.target滚出或标签更改时，停止执行my_function（） ？

Answer 1

好的，我知道这是一种不好的回答方法。标准是关闭这个问题并指出重复的问题，但这个问题有两部分和两个单独的答案。所以，我在这里给出答案的链接：

第1部分：检测HTML元素何时不在滚动视图中

Check if element is visible after scrolling

第2部分：检测选项卡何时不在视图中

How to tell if browser/tab is active

以上两点似乎都有可靠的答案。只需实现两者即可得到你想要的东西。

当部分HTML当前可见时如何连续执行Javascript函数？

1 个答案: