Conflito ao usar simultaneamente eventos do teclado para rolagem e snap à rolagem CSS


11

Você pode horizontalmente rolar minha página de demonstração, pressionando Space Bar, Page Up / Page Downe Left Arrow / Right Arrowchaves. Você também pode fazer o snap com o mouse ou o trackpad.

Mas apenas um ou outro funciona.

Existe uma maneira de coexistir eventos de teclado e snap à rolagem CSS? o que estou perdendo? Qualquer ajuda seria muito apreciada, pois estou lutando com esse problema há mais de uma semana.


Confira minha demonstração no CodePen

(Descomente a parte relevante do código CSS para ativar o efeito de encaixe da rolagem para ver se os atalhos do teclado param de funcionar.)



Nota: Estou usando um módulo pequeno e elegante chamado Animate Plus para obter a animação de rolagem suave.


Atualização: a solução da @ Kostja funciona no Chrome, mas não no Safari para Mac ou iOS, e é crucial para mim que funcione no Safari.

Respostas:


3

Eu acho que não há, o css substitui o javascript. Mas você pode simplesmente adicionar o listener de eventos do wheel como:

window.addEventListener("wheel", function() {
    if(event.deltaY > 0){
      animate({
        easing: "out-quintic",
        change: animateScroll(1)
      })      
    }
      if(event.deltaY < 0){
      animate({
        easing: "out-quintic",
        change: animateScroll(-1)
      })      
    }      
});

https://codepen.io/kostjaaa/pen/NWWVBKd


Você poderia postar um link em uma bifurcação no CodePen, porque não consigo fazer sua solução funcionar? Obrigado.
Tzar

Desculpe, mas não funciona. Tentaste?
Tzar

sim tentei com Chrome versão 78.0.3904.108 (64 bits)
kostja

O que não está funcionando do seu lado? o snap ou o pergaminho? você precisa clicar na visualização antes de usar o teclado btw. O teclado não é combinado com o cursor do mouse, como é a rolagem.
precisa

Acabei de o testar no Chrome e funciona! Mas não funciona no Safari para Mac ou iOS, o que é muito mais importante para mim neste projeto. Você sabe qual pode ser o motivo?
Tzar

0
window.onload = () => {
  window.addEventListener("wheel", () => {
    const direction = event.deltaY > 0 ? 1 : event.deltaY < 0 ? -1 : false;

    if (direction) {
      animate({
        easing: "out-quintic",
        change: animateScroll(direction)
      });
    }
  });

  document.body.onkeydown = event => {
    switch (event.key) {
      case " ": // Space Bar
      case "PageDown":
      case "ArrowRight": {
        animate({
          easing: "out-quintic",
          change: animateScroll(1)
        });
        break;
      }
      case "PageUp":
      case "ArrowLeft": {
        animate({
          easing: "out-quintic",
          change: animateScroll(-1)
        });
        break;
      }
    }
  };
};    

Isso deve funcionar.

https://codepen.io/JZ6/pen/XWWQqRK

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.