Javascript onscrollシンプルファンクション

私はjavascriptでちょっと新しく、div id = "foo"トリガをdiv id = "container"にスクロールすると、 "IM AWESOME"と表示されますid "コンテナ"。私はさらに、すべての<br>でスクロールできるか、または余白を追加することで、上下が正しく動作しないことを確認するのに十分なスペースを与えました。もしあなたが私を助けてくれるなら、それはすばらしいでしょう。 "私はすごく多くの"ブレークライン "を使うべきではないが、ちょうどそのドラフトコード"を知っている。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

現在のスクロール位置を取得し、offsetParentノードの上端を基準にした要素の距離と比較するには、window.pageYOffsetを使用する必要があります。

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シンプルファンクション

答えて

関連する問題