現在のテキストに必要なスペースに応じて、テキストを水平方向、垂直方向にスクロールするか、固定したままにしようとしています。コンテナ内に収まる場合は、固定されたままにする必要があります。そうでない場合は、移動する必要があります。事前にテキストがわからず、コンテナのサイズが動的です。
テキストがオーバーフローするかどうかを確認しようとしていますが、コンポーネントのマウント状態から正常に動作します。これを行うには、scrollheight と clientheight の組み合わせと、textcontainer のサイズとコンテンツ コンテナーのサイズを比較します。
<div id="content-container" :class="behaviourBasedClasses(data)">
<p id="text-container" :style="behaviourBasedTextStyle(data)">{{ text }}</p>
</div>
テキストがコンテナー内に収まる限り、更新も機能します。問題は、アニメーション化された状態とアニメーション化されていない状態を切り替えることです。コード内のデータ属性には、使用するクラスとテキスト スタイルを論理的に決定するための font-size およびその他の属性が含まれています。
問題を解決するために必要なのは、テキストをアニメーション化されていない状態に戻す機能です。次に、テキスト、フォント サイズ、またはコンテナー サイズが変更されるたびに、マウントされた状態で使用するルーチンを使用することができます。
状態: スクロールなし (アニメーションなし):
<div id="content-container" class="no-scroll">
<p id="text-container" style="font-size:100px;">{{ text }}</p>
</div>
横スクロール (アニメーション):
<div id="content-container" class="scroll-horizontal">
<p id="text-container">{{ text }} style="font-size:120px; padding-left: 663.065px; position: relative; margin: auto 0px; line-height: 662.985px; animation-name: scroll-horizontal2; animation-duration: 79.4095s; animation-timing-function: linear; animation-iteration-count: infinite;"</p>
</div>
テキストが水平にスクロールされている場合、scrollWidth は非常に広くなり、影響するデータに変更を加えてもそのままになります。したがって、スクロールモードから抜け出せません。
devtools に入り、手動でマークアップをスクロールなしの状態に戻すと、コードは再び機能します。しかし、プログラムでそこに到達する方法がわかりません。