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

我想在滚动时启动JS函数

animation web css html javascript

Wikson · 技术社区 · 3 年前

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

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 回复 | 直到 3 年前

crayonne 3 年前

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

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

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

Lee Taylor Dejan.S 3 年前

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

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 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前