javascript - 防止滚动-jQuery

原文 标签 javascript jquery html css

我试图使用JQuery e.preventDefault();阻止滚动,但是什么也没有发生,我需要停止滚动,并且当动画div出现在屏幕右侧时,滚动必须正常工作:



$(document).ready(function () {
    $(window).on('scroll', function (e) {
        var animation = $(".my-container .animation"),
            windowScroll = $(window).scrollTop();
        if (parseInt(animation.css('left')) + animation.width() < $(window).width()) {
            e.preventDefault();
            animation.css('left', windowScroll * 1.5);
        }
        else {
            // enable scroll
        }
});
})

.my-container{
    width:100%;
    height:620px;
    position:relative;
    overflow:hidden;
    background-color:#333333;
}
.my-container .animation{
    position:absolute;
    width:420px;
    height:200px;
    bottom:0;
    left:0;
    background-color:#02f15f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="my-container">
  <div class="animation"></div>
</section>





请全屏运行代码段

最佳答案

您必须使用$(window).scrollTop(windowScroll); e.preventDefault设置滚动条,因此无法使用:

参见下面的例子:



$(document).ready(function () {
    var windowScroll = $(window).scrollTop();
    $(window).on('scroll', function (e) {
        var animation = $(".my-container .animation");
            
        if (parseInt(animation.css('left')) + animation.width() < $(window).width())         {
            var scrl = $(window).scrollTop();
            $(window).scrollTop(windowScroll);
            //console.log(parseInt(animation.css('left')));
            animation.css('left', parseInt(animation.css('left')) + (scrl * 1.5));
        }
        else {
            // enable scroll
        }
});
})

body{
  height:2000px;
}

.my-container{
    width:100%;
    height:400px;
    position:relative;
    overflow:hidden;
    background-color:#333333;
}
.my-container .animation{
    position:absolute;
    width:420px;
    height:200px;
    bottom:0;
    left:0;
    background-color:#02f15f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="my-container">
  <div class="animation"></div>
</section>

关于javascript - 防止滚动-jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43568870/

相关文章:

javascript - 加载时隐藏数据表

javascript - 如何更改图表中列的颜色?

jquery - 在 TinyMCE 编辑器中滚动到特定内容

javascript - 使用JQuery .val()提取HTML值

javascript - 如何在字符串中求值?

css - 如何用用户定义的样式覆盖Default Bootstrap.css样式

javascript - 你如何处理 jQuery 中的表单更改?

javascript - 添加时,连续两列显示两个表

javascript - 在 Phonegap JQuery 移动设备上更改方向

javascript - 脚本执行时的模态加载消息