账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    通过scrollTop()判断滚动条到指定位置执行动画，代码执行很多次怎么办？
    68
    0

    1.通过scrollTop()判断滚动条到指定位置执行动画，代码执行很多次怎么办？
    点击查看DEMO，请用浏览器模拟手机查看效果，console.log有打印执行次数。

    现在的问题是我每次滚动他就执行一次，然后往回滚也会一直执行，一直判断scrollTop()，这样肯定会很卡，所以来请教大神们怎么解决。

    HTML代码如下：

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="box1"><img src="//img.alicdn.com/tfs/TB1S53efxrI8KJjy0FpXXb5hVXa-520-280.jpg"></div>
  <div class="box2">
        <div class="item1 tinRightIn"></div>
        <div class="item2 tinRightIn"></div>
        <div id="test" class="item3 tinRightIn"></div>
    </div>
    <div class="box3">
        <div class="c1 tinRightIn"></div>
        <div class="c2 tinRightIn"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

    JS代码如下：

    var nummmm = 0; 
$(document).ready(function () {            
     $(window).scroll(function () {                
         if ($(window).scrollTop() > 100) {
             $('.box2').addClass('animation-show');
             console.log(nummmm++);
         }
         if ($(window).scrollTop() > 600) {
             $('.box3').addClass('animation-show');
             console.log('test2');
         }
     });
 });
//动画结束时事件
var item2 = $(".item2")
document.querySelector('#test').addEventListener("webkitAnimationEnd", function(){ 
    this.className = this.className.replace('tinRightIn', 'show');
    item2.addClass("hidden");
    console.log(2); 
}, false);

    CSS代码如下：

    *{margin: 0;padding:0}
html,body{width:100%;}
img{
 width: 100%; 
}
.box2,.box3{
    width:100%;
    background: #ddd;
}
.box3{background: #eee;}
.item1,.item2,.item3{
    height: 500px;
    background: #ff0;
    margin-bottom: 30px;
}
.c1,.c2,.c3{
    height: 500px;
    background: red;
    margin-bottom: 30px;
    opacity: 0;
}
.item3{
    opacity: 0;
}
.hidden{
    opacity: .5;
}
.show{
    opacity: 1;
}
.animation-show .tinRightIn{
    -webkit-animation: tinRightIn 1.2s ease 1.2s;
    animation: tinRightIn 1.2s ease 1.2s;
}
@-webkit-keyframes tinRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2rem) translateY(-2rem);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0);
    }
}

    不知道要这样判断动画是否执行完这样的方法对不对呢？

    2
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • IKeYistand 普通会员 1楼

      如果你的滚动条已经到了指定位置，但是多次执行了scrollTop()，这可能是因为你的滚动条在用户滚动时并没有完全移动到指定位置。以下是一些可能的解决方案：

      1. 检查滚动条的位置：在每次执行scrollTop()之前，检查滚动条的位置是否已经正确。如果滚动条的位置没有正确更新，那么scrollTop()的值将不会改变。

      2. 清除旧的滚动条位置：每次滚动后，清除旧的滚动条位置。这样，新的滚动条位置就不会被旧的滚动条位置覆盖。

      3. 在滚动事件中保存滚动条的位置：在滚动事件中保存滚动条的位置，然后在新的滚动条位置之前检查这个位置是否正确。

      4. 使用CSS的transform属性：CSS的transform属性可以用来改变元素的位置。你可以使用transform: translate()或translateY()等属性来改变元素的位置。

      以下是一个使用CSS的transform属性的例子：

      ```css / 设置元素的位置 / element { position: relative; top: 50px; }

      / 在元素的位置添加滚动条 / element::-webkit-scrollbar { width: 10px; height: 10px; background-color: #ccc; }

      / 在滚动条的内部添加滚动条动画 / element::-webkit-scrollbar-thumb { background-color: #4CAF50; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }

      / 添加滚动条动画 / element::-webkit-scrollbar-thumb:hover { background-color: #45a049; } ```

      在这个例子中，我们首先设置了元素的位置，然后在元素的内部添加了一个滚动条。滚动条的内部使用了CSS的transform属性，设置了滚动条的大小和颜色。当用户滚动时，滚动条的大小会根据用户的滚动行为改变。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部