スクロールとCSSスクロールスナップにキーボードイベントを同時に使用すると競合が発生する


11

、キーを押すとSpace Bar、デモページを水平にスクロールできます。マウスまたはトラックパッドでスナップスクロールすることもできます。Page Up / Page DownLeft Arrow / Right Arrow

しかし、どちらか一方のみが機能します。

キーボードイベントとCSSスクロールスナップが共存できる方法はありますか?何が欠けていますか?1週間以上この問題に取り組んできたので、どんな助けでも本当にありがたいです。


CodePenのデモをご覧ください

(関連するCSSコードのコメントを解除して、スクロールスナップ効果を有効にして、キーボードショートカットが機能しなくなったことを確認してください。)



注:スムーズスクロールアニメーションを実現するために、Animate Plusと呼ばれる小さくてエレガントなモジュールを使用しています。


更新:@KostjaのソリューションはChromeでは機能しますが、MacまたはiOSのSafariでは機能しません。私にとってSafariで機能することが重要です。

回答:


3

私はそうではないと思います、cssはjavascriptを上書きします。ただし、次のように単純にホイールイベントリスナーを追加できます。

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


CodePenのフォークへのリンクを投稿していただけませんか。解決策が機能しないためです。ありがとう。
ツァー

申し訳ありませんが、動作しません。試しましたか?
ツァー

はい、Chromeバージョン78.0.3904.108(64ビット)で試してみました
kostja

あなたの側で何がうまくいっていませんか?スナップかスクロールか?キーボードを使用する前に、ビューをクリックする必要があります。キーボードは、スクロールのようにホバーと組み合わせられていません。
コスチャ

Chromeでテストしたところ、うまくいきました。しかし、MacまたはiOSのSafariでは機能しません。これは、このプロジェクトにとって私にとってより重要です。その理由は何でしょうか。
ツァー

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

これはうまくいくはずです。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.