javascript - 使用 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. 第二，当我滚动时，函数应该将变量“g”更新为 10，但它增加了 100 左右。这是什么奇怪的行为。您可以打开控制台并检查。这是 fiddle - https://jsfiddle.net/LuLt0mh0/

Answer 1

1. 只有当文档在加载时滚动时才会发生这种情况(例如，由于 anchor ，或者如果页面已经滚动则在重新加载时)

2. 对于每个发出的 scroll 事件，g 都会增加 10。但这是一个连续事件，在滚动时会多次触发。

   将 console.log(g) 添加到 pageScrolled 将向您显示它会增加10多次: jsfiddle.net/LuLt0mh0/1

   参见MDNscroll了解更多详情:

   [...]Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications.[...]