Question

我是一个新的javascript和我试图使div id =“foo”触发当我滚动div id =“container”时，为了说“IM AWESOME”当我滚动id“容器” 。我甚至给了足够的空间来确保我可以滚动所有<br>或者添加margin-top和bottom但仍然无法正常工作。如果你们能帮助我那将是非常棒的。 “我知道我不应该使用这么多”分界线“，但它只是一个草案代码”。

var x = document.getElementById('container');
  x.onscroll = function() {myFunction()};

  function myFunction() {
  document.getElementById('foo').innerHTML = "IM AWESOME";

}

<body>
    
    <br>
     <div id="container">
         
        </div>
    
     <div id="foo">do something</div>
    <br>
</body>

Answer 1

这是jQuery方法。你必须计算该ID的偏移量，如果该容器的ID小于$（窗口）.scrollTop（）然后执行你的可爱。

示例：

<a>

Answer 2

尝试设置容器的高度和宽度，然后在其中滚动。

Answer 3

您需要使用window.pageYOffset获取当前滚动位置，并将其与元素相对于offsetParent节点顶部的距离进行比较。

More info here

function testScroll(ev){
    if(window.pageYOffset >= document.getElementById("foo").offsetTop){
        document.getElementById('foo').innerHTML = "IM AWESOME";
    }
}
window.onscroll=testScroll

Full demo

Javascript onscroll简单的功能

3 个答案: