JavaScript onscroll簡單功能

我有點新的JavaScript和我想讓div id =「foo」觸發當我滾動div id =「容器」，爲了說「IM真棒」，當我滾動通過ID「容器」。我甚至給了足夠的空間，以確保我可以滾動所有的<br>或通過添加margin-top和bottom但仍然無法正常工作。如果你們可以幫助我，那真是太棒了。「我意識到我不應該使用這麼多的」breaklines「，但它只是一個草案代碼」。JavaScript onscroll簡單功能

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>

來源

2017-04-23 wydtron

我不知道怎麼樣，但[這]（https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_svg_scrolldrawing）可能會派上用場。 – Sank6

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API –

這裏是jQuery的方法。你必須計算該ID的偏移量，如果該容器的ID小於$（window）.scrollTop（），那麼執行你可愛的。

實施例：

var $container = ('.container'), 
    $window = $(window).scrollTop(), 

yourfunction = function(){ 
if($container < $window){ 
//run your code 
} 
}); 

$(window).on('scroll', yourfunction);

來源

2017-04-23 15:17:34 kenny

嘗試設置用於所述容器的高度和寬度，然後在其內部滾動。

來源

2017-04-23 15:19:03

您需要使用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

來源

2017-04-23 15:23:34

JavaScript onscroll簡單功能

回答

相關問題