函数 scrollIntoView 不起作用

Question

我的功能有点问题scrollIntoView。确实，它不起作用:(

这是我的代码：

HTML

<section class="page_mission">
  <div class="page_mission_text">
    <div class="scroll-animations">
      <div class="animated fadeInLeft">
        <h2>Design <i class="fab fa-css3-alt"></i><i class="fab fa-html5"></i></h2>
        <p>Blablabla<br></p>
      </div><hr style="width: 75%;">
      <div class="animated">
        <h2>Modernité <i class="fas fa-dna"></i></h2>
        <p>Blablabla</p>
      </div><hr style="width: 75%;">
      <div class="animated">
        <h2>Coûts <a href="cost_popup.html" class="ajax-popup-link"><i class="far fa-credit-card"></i></a></h2>
        <p>Blablabla</p>
      </div>
    </div>
  </div>
</section>

JS

$(document).ready(function() {
   function isScrolledIntoView(elem) {
       var docViewTop = $(window).scrollTop();
       var docViewBottom = docViewTop + $(window).height();

       var elemTop = $(elem).offset().top;
       var elemBottom = elemTop + $(elem).height();

       return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(window).scroll(function() {
        $('.scroll-animations .animated').each(function() {
            if (isScrolledIntoView(this) === true) {
                $(this).addClass('fadeInLeft');

            }
    });
});

有人知道哪里出了问题吗？非常感谢！

Answer 1

在我看来 fadeInLeft class 正在按预期添加到滚动条上。但是，您确实需要一个额外的右大括号和右括号来关闭您的文档就绪事件处理程序：

$(document).ready(function() {

  function isScrolledIntoView(elem) {

  var docViewTop = $(window).scrollTop();

  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;

  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }

  $(window).scroll(function() {

    $('.scroll-animations .animated').each(function() {

      if (isScrolledIntoView(this) === true) {

        $(this).addClass('fadeInLeft');

      }

    });
  });

}); // This was missing

JSFiddle

您还需要确保在 JavaScript 执行之前加载 jQuery。最简单的方法是在页面的 <head> 元素中放置这样的内容：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

函数 scrollIntoView 不起作用

Function scrollIntoView doesn't work

html

javascript

jquery

js-scrollintoview