在Bootstrap Modal中检测滚动使滚动上的每个元素动画化

Detect scroll inside Bootstrap Modal & animate each elements on scroll

本文关键字：滚动 元素 动画 Modal Bootstrap 检测      更新时间：2023-09-26

我试图写一个代码，其中当一个引导模式打开一个缩放动画是触发滚动到每个元素。

jsFiddle链接- https://jsfiddle.net/nwxLq2zg/1/

下面是示例代码- 
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
         <p>...</p>
         <p>...</p>
         <p>...</p>
         <p>...</p>
         ...   
      </div>
    </div>
  </div>
</div>
jQuery 

$('#myModal').on('show.bs.modal', function () {
    $(".modal-body").unbind("scroll");
    $(".modal-body").scroll(function(){
        var mScroll = $(this).scrollTop();
        $('.modal-body p').each(function(){
          var eTop = $(this).offset().top;
          console.log('Modal:'+mScroll+'| Element:'+eTop);
          if(eTop >  mScroll) {
            $(this).addClass('animated zoomIn');
          }
        });
    });
});

问题是addClass被触发到所有元素，而不管滚动值。我怀疑这是因为我的代码无法识别个人"

"标签。如果有人能找到答案，那就太有帮助了。

实际代码可以在这个jsFiddle - https://jsfiddle.net/nwxLq2zg/1/

中找到

我尝试使用<= mScroll并添加-50 on top offset检查这个小提琴

https://jsfiddle.net/nwxLq2zg/5/

$('#myModal').on('show.bs.modal', function () {
    $(".modal-body").unbind("scroll");
    $(".modal-body").scroll(function(){
        var mScroll = $(this).scrollTop();
        $('.modal-body p').each(function(){
        var eTop = $(this).offset().top - 50;
          if(eTop <=  mScroll) {
            $(this).addClass('animated zoomIn');
          }
        });
    });
});

你可以使用Wow.js，它有助于显示滚动信息。你所要做的就是下载这个插件，在你的页面中添加js文件，并在页面加载时初始化wow。

在你的html中，你不需要在运行时添加类。

享受:)

相关文章：