使用 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. 其次，当我滚动时，函数应该用 10 更新变量"g"，但它会增加 100。这是什么奇怪的珠子。您可以打开控制台并检查。这是小提琴 - https://jsfiddle.net/LuLt0mh0/

Answer 1

仅当文档在加载时滚动时(

1. 例如，由于锚点，或者如果页面已经滚动，则在重新加载时(才会发生这种情况

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

   向pageScrolled添加console.log(g)将显示它增加了10倍数：jsfiddle.net/LuLt0mh0/1

   参见 MDN滚动查看更多详细信息：

   [...]由于滚动事件可以以高速率触发，因此事件处理程序 不应该执行计算成本高昂的操作，例如 DOM 修改。[...]

Answer 2

以下行有 2 个问题：

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

1. 每次滚动事件发生时，该行都会执行 - 结果#imag top减少 x10px。当然，之所以什么都没有发生，是因为...

2. #imag没有分配position属性。为了使属性top工作，如果元素具有position: relative, absolute, or fixed. 但是，即使您确实更正了此问题，该行代码也会使您的#imag离开视口，再也不会被看到，并将继续向北移动，直到您刷新页面。