Make a text scroll automatically, with CSS animation, only if it overflows-CodePudding

I want to have a div, that when you hover it, text scroll if it's larger than the div.

But for now the text will always scroll event if it's shorter.

Here is my html code :

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

In this exemple, I would like the animation disabled on the second as it fits in the container.

Do you know a way to do it in CSS ? Or do I have to use JS ?

Thanks.

CodePudding user response：

Dont know it is possible in CSS, but its quite simple is JS.

First of all i made another class for hovering effect:

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

Then quick js as commented.

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 >
      <div >
        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 >
      <div >
        Not long
      </div>
    </div>

  </body>
</html>

CodePudding user response：

You wouldn't be able to do this with CSS alone, but you could use JS to check the size of the content inside of the container to compare it to the width of the container. If content > container, then scroll; else do nothing. Here's what I might do in this situation:

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 >
  <div >
    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 >
  <div >
    Not long
  </div>
</div>