マウス を使用して水平スクロールします アイコン。 JavascriptのscrollLeftで試してみましたが、スクロールしても値は変わりません。スクロールすると、deltaY 値のみが 100 と -100 の間で変化します。
問題がどこにあるのか知っている人はいますか?
スクロールしてスクロールバーをマウスオーバーすると機能しますが、div コンテナ全体で機能したいと考えています。また、可能であれば依存関係/npm-librariesなしでこれを実行したいと考えています。
＃＃＃テンプレート＃＃＃ リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
あなたの例の問題は、
event.targetがスクロールバー要素ではなくアイコンであることです。refを使用して、正しい要素をターゲットにしていることを確認します。 1別のオプションは、要素の
scrollLeftHTML 属性にバインドし、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## の省略形) ＃）。
私はあなたと同様のことを試しましたが、
event.target.scrollLeft =event.deltaYを使用するまでは機能しませんでした。 ScrollIcons メソッド内。こうすることで、カーソルがアイコン上にあるときにマウス ホイールを使用すると、アイコンではなく、含まれている div またはラベルがターゲットになります。つまり、カーソルが含まれている div とマウス ホイール内にある限り、div とマウス カーソルの間にある他の要素に関係なく、div は応答するはずです。でtargetの代わりにcurrentTarget