1

我试图让一些文本水平滚动，垂直滚动或保持固定，具体取决于当前文本需要的空间。如果它适合容器，它应该保持固定。如果没有，它应该移动。我事先不知道文本，我有动态容器大小。

我正在尝试检查文本是否溢出，并且它在组件的安装状态下工作正常。我通过比较 scrollheight 与 clientheight 和 textcontainer 大小与内容容器大小的组合来做到这一点。

<div id="content-container" :class="behaviourBasedClasses(data)">
    <p id="text-container" :style="behaviourBasedTextStyle(data)">{{ text }}</p>
</div>

只要文本适合容器，更新也有效。问题是在动画和非动画状态之间切换。代码中的 data 属性包含 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 并手动将标记编辑回无滚动状态，代码将再次起作用。但我不知道如何以编程方式到达那里。

4

0 回答 0