Question

我的主页上有一个div。我有一个.js文件，只有当用户在他的屏幕上查看它时才必须在其上运行，即div被放下并且.js文件应该仅在用户在向下或向上滚动主页时查看div时运行

我该怎么做？

Answer 1

使用window.addEventListener。并将一个事件附加到侦听器，并为其添加一个函数。

示例，在您的情况下，它的滚动，所以，它就像这样 -

window.addEventListener('scroll', function(){

// YOUR CODE

});

希望它有所帮助！ :)快乐的编码！

Answer 2

您可以使用getBoundingClientRect()功能来实现此目的。它为您提供了相对于视口的当前矩形。

<script>
    window.addEventListener('scroll', function(e){
        var rect = document.getElementById('iddiv').getBoundingClientRect();
        if(rect.top > 0 && window.innerHeight > rect.bottom) {
           //The div is completely in the screen now
        }
    });

</script>

Answer 3

这可能不是最佳解决方案，但您也可以使用附加了js代码的HTML事件，例如使用onmouseover：

<!DOCTYPE html>
<html>
<body>

<div id="demo" onmouseover="myFunction()">Bring mouse here!!!
</div>

<script>
 function myFunction() {
    return document.getElementById("demo").innerHTML = "Good job!";
}
</script>
</body>
</html>

我知道你在这里使用外部js文件，你可以用<script src="myScript.js"></script>替换脚本标记。你明白了。类似地，当用户滚动到不同区域时，您可以使用onmouseout事件来更改显示。希望它有所帮助，欢呼！

在主页上的div上运行JavaScript

3 个答案: