js滚动table动画

作者：羊村懒王 | 2024-03-02 11:57:59

踩

js滚动table动画

requestAnimationFrame()告诉浏览器你希望执行一个动画，，并且要求浏览器在下次重绘之前调用指定的回调，，更新动画。。。
请求动画帧，，也称帧循环，，，
改api能以浏览器的显示频率来作为其动画动作的频率，，，一般的电脑都是60hz，，

requestAnimationFrame 只会被调用一次，，如果想实现动画效果，，必须在回调中继续调用requestAnimationFrame ,

怎么控制动画的频率：

var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimationFrame(draw);
        // Drawing code goes here
    }, 1000 / fps);
}
1
2
3
4
5
6
7

怎么停止这个动画：

// requestAnimationFrame会返回一个id
let id = requestAnimationFrame()
// 停止动画
cancelAnimationFrame(id)
1
2
3
4

引用：https://blog.csdn.net/tianlunvip/article/details/104039697

js滚动事件

引用：https://blog.csdn.net/NGUP_LEE/article/details/123969905

监听滚动：

window.addEventListener("scroll",function(){})
1

在这里插入图片描述

offsetWidth 和 offsetHeight : 包含自身设置的宽高，padding，border等

clientWidth 和 clientHeight ：获取元素的可见部分的宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .container{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        overflow-y: scroll;
    }
</style>

<div class="container">
    <div class="inner-container" style="border: 1px solid yellow">
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
    </div>

</div>
<script>
    var box = document.querySelector(".container");
    var innerbox = document.querySelector(".inner-container");

    box.addEventListener("scroll",function (){

        // console.log(this.scrollTop,"111",innerbox.offsetHeight,box.clientHeight)
        console.log(innerbox.offsetHeight - box.clientHeight,this.scrollTop)
        if (this.scrollTop > (innerbox.offsetHeight - box.clientHeight - 10)){
            console.log("end")
            box.scrollTop = 0
        }
    })


   


    let fps = 15
    function scroll(){
        setTimeout(function (){
            box.scrollTop++
            requestAnimationFrame(scroll)
        },100)
    }

    requestAnimationFrame(scroll)



</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/180367