gpt4 book ai didi

javascript - 当部分 HTML 当前可见时,如何连续执行 Javascript 函数?

转载 作者:行者123 更新时间:2023-11-28 02:35:37 26 4
gpt4 key购买 nike

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

脱离可见范围意味着该元素通过以下方式脱离:

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

示例代码:我有一个 HTML 样式,以确保我的屏幕 (1920 X 1080) 上的 div 主(整个页面)和 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()

最佳答案

好吧,我知道这是一个不好的回答方法。标准是关闭这个问题并指出重复的问题,但是这个问题有两个部分和两个单独的答案。因此,我将答案的链接放在这里:

第 1 部分:检测 HTML 元素何时不在 ScrollView 中

Check if element is visible after scrolling

第 2 部分:检测选项卡何时不在 View 中

How to tell if browser/tab is active

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

关于javascript - 当部分 HTML 当前可见时,如何连续执行 Javascript 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13508755/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com