Suppose we have a div with height 100px. We want the top to bottom scrolling of text when the text-overflow happened. Otherwise, nothing happens just show the full text. Here I am using the custom CSS for the animation. And the overflow detects by javascript code on document load. As most people suggest not use the marquee tag, I try to use something else.
HTML code for that:
|
1 2 3 4 5 |
<div id="textContainer"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, eaque ipsa quae ab illo inventore veritatis et quasi architecto magnam aliquam quaerat voluptatem. Lorem ipsum dolor sit amet, consectetur </p> <div> |
CSS for animation: animation will start after 5 seconds for animation-delay: 5s;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
#textContainer { height: 50px; } .textVerticalScroll { overflow: hidden; } .textVerticalScroll p:nth-child(1) { animation-delay: 5s; animation: marquee 15s linear infinite; -moz-animation: marquee 15s linear infinite; -webkit-animation: marquee 15s linear infinite; } .textVerticalScroll p:nth-child(1):hover { animation-play-state: paused; } @-moz-keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -100%); } } @-webkit-keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -100%); } } @keyframes marquee { 0% { -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -moz-transform: translate(0, -100%); -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } } |
Now detect the overflow if happened
|
1 2 3 4 5 6 7 8 9 10 11 12 |
document.addEventListener('DOMContentLoaded', function() { const isElementOverflowing = (element) => { const overflowX = element.offsetWidth < element.scrollWidth; const overflowY = element.offsetHeight < element.scrollHeight; return overflowX || overflowY; }; const element = document.getElementById('textContainer'); if (isElementOverflowing(element)) { element.classList.add('textVerticalScroll'); } }, false); |
You can check my codepen for demo.