Анимированный свиток с 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>

Как видите, Wheel-listener работает отлично, а click-listener - нет. Как мне решить эту проблему, если это возможно?

Заранее спасибо.

Answer 1

Проблема возникает из-за того, что вы получаете только первый кликабельный элемент: var clickMe = document.querySelector('.clickMe');

Итак, вы прикрепляете событие нажатия только к первому элементу «колесо» текста. Решение этой проблемы состоит в том, чтобы получить все элементы ".clickMe" с querySelectorAll и прикрепить событие 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);
});

Answer 2

Вместо document.querySelector('.clickMe') вы можете использовать jQuery Селектор $('.clickMe'). Чем работает нормально.

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

var clickMe = document.querySelector('.clickMe');
console.log(clickMe);
$('.clickMe').on('click', function() {
    console.log('clicked');
    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 3

Наконец выяснили проблему.

После анимации

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

Мне нужно было добавить JQuery: s stop() функцию,

$('html, body').stop();

Кредиты: Функция Stop ScrollTop при прокрутке пользователя jquery

Answer 4

Вы уверены, что это не кликабельно? В функции, которая обрабатывает абзац, нажмите add console.log ("CLICKED"); и посмотрите в консоли, если что-то появляется при нажатии. А в css добавить стиль для курсора clickMe: указатель; поэтому при наведении курсора это выглядит лучше.