javascript - 带有JQuery的动画滚动

怎样才能使我由于某种原因无法点击的文本...（请检查下面的代码）可点击？

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>

如您所见，Wheel-listener可以完美地工作，而click-listener却不能。如果可能，我该如何解决这个问题？

提前致谢。

最佳答案

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

因此，只需在第一个元素“ wheel”文本上附加click事件。
解决此问题的解决方案是使用querySelectorAll获取所有“ .clickMe”元素，并将click事件附加到每个元素。

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);
});

关于javascript - 带有JQuery的动画滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60021026/