Angel丶守护&雪之源 2023-11-10 14:27 采纳率: 22%
浏览 2
已结题

aos.js脚本做页面滚动动画时,当动画节点过多时滚动节点大于12时再往下滚动后面的部分节点会优先显示

bug问题:

img


详细代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./js/aos3.js"></script>
        <!-- <script src="./js/zepto.js"></script> -->
    </head>
    <link rel="stylesheet" href="./css/aos.css" />
    <style type="text/css">
        .aos-item{
            width: 100%;
            margin: 6px;
        }
        .aos-item .title{
            background-color: aliceblue;
            height: 40px;
            width: 100%;
        }
        .aos-item .content{
            background-color: #ececec;
            height: 240px;
            width: 100%;
        }
    </style>
    
    <body>
        <div class="aos-items">
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="0">
                <div class="title">
                    标题一
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="200">
                <div class="title">
                    标题二
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="400">
                <div class="title">
                    标题三
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="600">
                <div class="title">
                    标题四
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="800">
                <div class="title">
                    标题五
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="1000">
                <div class="title">
                    标题六
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="1200">
                <div class="title">
                    标题七
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="1400">
                <div class="title">
                    标题八
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="1600">
                <div class="title">
                    标题九
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="1800">
                <div class="title">
                    标题十
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="2000">
                <div class="title">
                    标题十一
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="2200">
                <div class="title">
                    标题十二
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="2400">
                <div class="title">
                    标题十三
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="2600">
                <div class="title">
                    标题十四
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="2800">
                <div class="title">
                    标题十五
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="3000">
                <div class="title">
                    标题十六
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="3200">
                <div class="title">
                    标题十七
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
            <div class="aos-item aos-init" data-aos-offset="20" data-aos="fade-up" data-aos-delay="3400">
                <div class="title">
                    标题十八
                </div>
                <div class="content">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
            </div>
        </div>
    </body>
</html>

<script>
    AOS.init({
    });
</script>

希望帮忙解决一下

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-11-10 17:26
    关注

    【相关推荐】




    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月6日
  • 创建了问题 11月10日

悬赏问题

  • ¥20 python爬虫遇到空文本取不出来
  • ¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
  • ¥15 curl 命令调用正常,程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥15 使用百度地图api 位置函数报错?
  • ¥15 metamask如何添加TRON自定义网络
  • ¥66 关于川崎机器人调速问题
  • ¥15 winFrom界面无法打开
  • ¥30 crossover21 ARM64版本安装软件问题
  • ¥15 mymetaobjecthandler没有进入