代码之家 › 专栏 › 技术社区 › Wikson

我想在滚动时启动JS函数

animation web css html javascript

Wikson · 技术社区 · 2 年前

我有一个单页网站,有一个进度条部分。我有一个动画等功能,我知道如何在页面加载时启动它。但当我滚动到那个部分时,我不知道如何启动它。

JS代码:

window.onload = function() {
    move();
};

var i = 0;
function move() {
    if (i == 0) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 1;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 95) {
                clearInterval(id);
                i = 0;
            } else {
                width++;
                elem.style.width = width + "%";
            }
        }
    }
}

2 回复 | 直到 2 年前

crayonne 2 年前

如果您想在scroll上触发,可以通过jquery来实现。

$(element).scroll(() ={
    function ()
}

但如果你想在滚动上制作动画,我建议你使用一个叫做Gsap的库。查看scrollTrogger文档。

Lee Taylor Dejan.S 2 年前

只需在整个文档上使用滚动事件:

document.addEventListener('scroll', function(e) {
  move();
});

var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);

    function frame() {
      if (width >= 95) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

<div style="height:1000px;width:100%;">

<div style="height:200px">padding</div>
  <div id="myBar" style="background:green;">my bar</div>

</div>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前