自动/电影滚动文本框效果 CSS/JS答案

【问题标题】：Auto/ Cinematic Scroll Text Box Effect CSS/ JS自动/电影滚动文本框效果 CSS/JS
【发布时间】：2021-05-10 13:55:01
【问题描述】：

我想创建一个文本框在悬停时自动滚动的简单变体，如 here 所示。当您将鼠标悬停在一个框上时，文本会滚动。当您将鼠标移出时，文本会重置到开头。这就是我所追求的。

似乎有一个类似的问题：Auto scroll text effect。但是，示例链接不起作用（至少对我而言），我不能明确地说它是否与我所追求的相同。该问题还假设一个 jquery 环境。我正在使用原生 JS。

我不确定这是否需要 JS，也欢迎使用 html/css 解决方案。让我知道我能为这项任务带来什么。

【问题讨论】：

【解决方案1】：

您可以给文本框或 div 一个类，如：

  .mydiv:hover {  
    animation: scrolling 12s .2s linear 1;
  }


  @keyframes scrolling {
    from { top: 0; transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -100%, 0); }
  }

你可能需要给它一些overflow: auto;和overflow-x: hidden;

【讨论】：

【解决方案2】：

有一个与您类似的问题，请参阅here。

您可能还想看到这个question。

关于使用marquee、start/stop 滚动。

示例：

<!DOCTYPE html>
<title>My Example</title>

<marquee behavior="scroll" direction="up" id="mymarquee" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
<p>This the the sample</p>
<p>of my text</p>
</marquee>

冗长的段落：

#mypara {
  display: block;
  width: 150px;
  word-wrap: break-word;
}

<title>My Example</title>

<marquee behavior="scroll" direction="up" id="mymarquee" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
  <p id="mypara">This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.</p>
</marquee>

【讨论】：

酷，感谢您的参考。我很想尝试一个冗长的<p>，而不是每行一个新的<p>。我的猜测是它可以与一些样式一起使用。
@ArashHowaida 是的，我用一个小例子编辑了答案。

【解决方案3】：

div = document.getElementById("whatever_your_textboxes_id_is")

div.scrollTop = div.scrollHeight;

【讨论】：

请为您的回答提供更多详细信息。