使文本自动滚动，用 CSS animation，只有当它溢出时

Question

我想要一个 div，当您输入 hover 时，如果它大于 div，则文本滚动。

但是现在，如果文本更短，它将始终滚动事件。

这是我的 html 代码：

https://codesandbox.io/s/gracious-glade-7z31zc?file=/index.html

在此示例中，我希望在第二个上禁用 animation，因为它适合容器。

你知道CSS的方法吗？ 还是我必须使用 JS？

谢谢。

Answer 1

不知道在 CSS 中是否可行，但它很简单就是 JS。

首先我做了另一个 class 用于悬停效果：

 .scrolled:hover {
    animation: scroll-rtl 15s linear forwards;
  }

然后像评论的那样快速js。

 document.querySelectorAll('.chip-value') // get all elements you want.forEach( item => { // iterate over them and get every as "item" if(item.offsetWidth > 400){ // check if it's widthter than parent item.classList.add('scrolled') // if is, add him class to scroll } })

 .chip-container { margin-left: 3px; margin-right: 3px; margin-top: 3px; margin-bottom: 3px; max-width: 400px; height: 32px; font-size: 0.8125rem; display: inline-flex; align-items: center; /* WebkitBoxAlign: center; */ border-radius: 16px; white-space: nowrap; /* // outline: 0, */ text-decoration: none; /* // border: 0, */ vertical-align: middle; /* // boxSizing: 'border-box', */ overflow: hidden; background-color: gray; color: white; }.chip-value { display: inline-block; position: relative; text-overflow: clip; margin-right: 5px; margin-left: 5px; }.scrolled:hover { animation: scroll-rtl 15s linear forwards; } @keyframes scroll-rtl { 0% { transform: translate(0); } 100% { transform: translate(-100%); } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet/css" href="index.css" /> <title>Static Template</title> </head> <body> <div class="chip-container"> <div class="chip-value"> Very very very very very very very very very very very very very very very very very very very very very very very long </div> </div> <div class="chip-container"> <div class="chip-value"> Not long </div> </div> </body> </html>

Answer 2

你不能单独使用 CSS 来做到这一点，但你可以使用 JS 检查容器内部内容的大小，并将其与容器的宽度进行比较。 如果内容 > 容器，则滚动； 否则什么都不做。 在这种情况下，我可能会这样做：

 document.addEventListener('DOMContentLoaded', function(){ var elements = document.getElementsByClassName('chip-container'); for(var element of elements){ var pw = element.querySelector('.chip-value').offsetWidth; var cw = element.offsetWidth; if(pw > cw){ element.classList.add('animate-me-baby'); } } });

 .chip-container { margin-left: 3px; margin-right: 3px; margin-top: 3px; margin-bottom: 3px; max-width: 400px; height: 32px; font-size: 0.8125rem; display: inline-flex; align-items: center; /* WebkitBoxAlign: center; */ border-radius: 16px; white-space: nowrap; /* // outline: 0, */ text-decoration: none; /* // border: 0, */ vertical-align: middle; /* // boxSizing: 'border-box', */ overflow: hidden; background-color: gray; color: white; }.chip-value { display: inline-block; position: relative; text-overflow: clip; margin-right: 5px; margin-left: 5px; }.animate-me-baby:hover.chip-value { animation: scroll-rtl 15s linear forwards; } @keyframes scroll-rtl { 0% { transform: translate(0); } 100% { transform: translate(-100%); } }

 <div class="chip-container"> <div class="chip-value"> Very very very very very very very very very very very very very very very very very very very very very very very long </div> </div> <div class="chip-container"> <div class="chip-value"> Not long </div> </div>