Vue の水平スクロール

Question

マウス を使用して水平スクロールします アイコン。 JavascriptのscrollLeftで試してみましたが、スクロールしても値は変わりません。スクロールすると、deltaY 値のみが 100 と -100 の間で変化します。

問題がどこにあるのか知っている人はいますか?

スクロールしてスクロールバーをマウスオーバーすると機能しますが、div コンテナ全体で機能したいと考えています。また、可能であれば依存関係/npm-librariesなしでこれを実行したいと考えています。

＃＃＃テンプレート＃＃＃ リーリー

JavaScript

リーリー

ササ

リーリー

下にスクロールしたときのコンソール出力

リーリー

これは次のようになります

Answer 1

あなたの例の問題は、event.target がスクロールバー要素ではなくアイコンであることです。

ref を使用して、正しい要素をターゲットにしていることを確認します。 ¹

---

別のオプションは、要素の scrollLeft HTML 属性にバインドし、Vue に DOM 更新を処理させることです。コントローラーの値を変更するだけです。

.camel 修飾子を使用して、(プロパティにバインドするために使用する) HTML 属性が大文字と小文字を区別しないという事実を回避します :scroll-left.camel # # ＃＃＃＃＃＃＃23＃＃＃＃＃＃＃＃＃＃＃＃ ^{リーリー リーリー リーリー} コメント:

1

---

-

scrollLeft プロパティにバインドしているため、ref# は必要ありません。 ＃＃ もう 。コントローラーの ^scrollLeft 値を有効な値に制限したかったのと、最大値を計算するために ref が必要だったので、このままにしました。 2 - HTML プロパティなので、技術的には :scroll-left.camel.prop
である必要がありますが、これも機能します.prop修飾子^なし 3 - .scroll-left.camel
も適用されます (:scroll-left.camel.prop## の省略形) ＃）。

Answer 2

私はあなたと同様のことを試しましたが、 event.target.scrollLeft =event.deltaY で target の代わりに currentTarget を使用するまでは機能しませんでした。 ScrollIcons メソッド内。こうすることで、カーソルがアイコン上にあるときにマウス ホイールを使用すると、アイコンではなく、含まれている div またはラベルがターゲットになります。つまり、カーソルが含まれている div とマウス ホイール内にある限り、div とマウス カーソルの間にある他の要素に関係なく、div は応答するはずです。