javascript - 使用 JQuery 实现动画滚动

Question

如何使文本由于某种原因我不可点击...(检查下面的代码)可点击？

var container = document.querySelector('.container');

var clickMe = document.querySelector('.clickMe');
clickMe.addEventListener('click', function() {
    var container = document.querySelector('.container');

    $([document.documentElement, document.body]).animate({
        scrollTop: $(".container").offset().top
    }, 1000);
});

container.addEventListener('wheel', function() {
    var scrollY = window.scrollY;
    if (scrollY == 0) {
      $([document.documentElement, document.body]).animate({
        scrollTop: $(".nextContainer").offset().top
      }, 800);
    }
});

.container {
  background: green;
  height: 100vh;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <p class="clickMe">'wheel'</p>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="nextContainer">
  <p class="clickMe">I am not clickable for some reason...</p>
</div>

如您所见，滚轮监听器工作正常，而点击监听器则不然。如果可能的话，我该如何解决这个问题？

提前致谢。

Answer 1

出现问题是因为您在这里仅获得第一个可点击元素: var clickMe = document.querySelector('.clickMe');

因此，您将点击事件附加到第一个元素“wheel”文本处。解决这个问题的解决方案是获取所有带有 querySelectorAll 的“.clickMe”元素。并将点击事件附加到每个元素。

var clickMe = document.querySelectorAll('.clickMe'); 
clickMe[0].addEventListener('click', function() {
    var container = document.querySelector('.container');

    $([document.documentElement, document.body]).animate({
        scrollTop: $(container).offset().top
    }, 1000);
});
clickMe[1].addEventListener('click', function() {
    var container = document.querySelector('.container');

    $([document.documentElement, document.body]).animate({
        scrollTop: $(container).offset().top
    }, 1000);
});