do autoscroll with a div in javascript

I am creating a autoscroll that shows the news description. The news is changing with a minimum interval of 10 seconds. I have a div element with overflow: hidden and when the text exceeds the size of this div the autoscroll is activated and it always stops at the last line 5 seconds before changing the news. The problem I have is that sometimes the text exceeds the div in just one line and the autoscroll is not done in a fluid way, it goes up little by little and the pixel changes are noticed and it is very ugly. I have searched the internet and tried several ways but I can not find a solution, can someone tell me how I can fix it?

function autoScroll(element) {
    const overview =    document.getElementsByClassName("overview")[0].clientHeight;
   
    if(element.scrollHeight > overview) {
        element.style.bottom = '${element.scrollHeight - overview}px';
    }
}

.overview {
    position: relative;
    height: 53.2vh;
    width: 100%;
    overflow: hidden;
}

.text {
    position: relative;
    bottom: 0px;
    transition-property: bottom;
    transition-timing-function: linear;
    transition-delay: 3s;
}

The .text class contains the text of the news.