1

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

超出可见范围意味着该元素通过以下方式退出：

  • 滚动（垂直或水平）
  • 更改为其他浏览器选项卡
  • 关闭选项卡/窗口/整个浏览器。

示例代码：我有一个带有样式的 HTML，以确保我的 div 主（整个页面）和 div 目标在我的屏幕上（1920 X 1080）低于可见范围：

<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 被滚动或 tab 被改变时，停止执行 my_function() ？

4

1 回答 1

1

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

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

检查滚动后元素是否可见

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

如何判断浏览器/选项卡是否处于活动状态

以上两个似乎都有可行的答案。只需实现两者即可获得您想要的。

于 2012-11-22T09:23:37.123 回答