スクロール使用してjavascriptの方法

Question

HTML

<section id="imag" class = "paral-1 image-contain">   
</section> 

はJavaScript

var g = 0; 
    //var myImage = document.getElementById("imag"); 
    window.addEventListener('scroll', pageScrolled); 

    function pageScrolled() { 
     g = g + 10; 
     document.getElementById("imag").style.top = -g+"px" ; 
    } 

1. まず、関数は、スクロールが、ページのロードが、それが呼び出されたときに呼び出されなければなりません。
2. 第2に、関数をスクロールすると、変数 "g"が10で更新されるはずですが、100のように増加します。この変わったbeahviourは何ですか？コンソールを開いてチェックすることができます。 ここでフィドルだ - https://jsfiddle.net/LuLt0mh0/

Answer 1

1. 文書が負荷にスクロール（理由はアンカーの例、またはページがすでにスクロールされた場合は、リロードに）

2. のためである場合にのみ発生しますそれぞれscrollイベントgが発生し、10が増加します。しかし、それはスクロールしている間に何回も起動される継続イベントです。 pageScrolledにconsole.log(g)を追加

   は、それが10複数倍に増加している ことが示されます： jsfiddle.net/LuLt0mh0/1

   詳細はMDN scroll参照してください：

   [...]スクロールイベントができるためにイベントハンドラ は、DOM のような計算上高価な操作を実行すべきではありません[...]

Answer 2

あなたは次の行で2つの問題を抱えて：

document.getElementById("imag").style.top = -g + "px"; 

1. スクロールイベントが起こるたびに、その行が実行される - 結果はx10pxによって#imagtop減少います。もちろん何も起こらない理由は...

2. #imagには、positionというプロパティが割り当てられていません。プロパティtopが機能するようにするには、要素にposition: relative, absolute, or fixed.がある場合です。ただし、これを修正しても、そのコード行は、あなたのビューポートから#imagを離して表示することはなく、ページを更新するまでは北に進みます。