Vue の水平スクロール

Question

マウスでアイコンを横にスクロールしたいです。 JavascriptのscrollLeftで試してみましたが、スクロールしても値は変わりません。スクロールすると、deltaY 値のみが 100 と -100 の間で変化します。どこに問題があるか知っている人はいますか?スクロールしてスクロールバーをマウスオーバーすると機能しますが、divコンテナ全体で機能したいと考えています。また、可能であれば依存関係/npm-librariesなしでこれを実行したいと考えています。テンプレート

P粉422227023 · Answer

あなたの例の問題は、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## の省略形) ＃）。

P粉434996845 · Answer

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

JavaScript

ササ

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

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