Question

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

我正在尝试检查文本是否溢出，并且它在组件的挂载状态下工作正常。我通过比较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并手动将标记编辑回非滚动状态，则代码再次起作用。但我不知道如何以编程方式到达那里。

中级状态或类似的东西

0 个答案: