Как выполнить автопрокрутку текста по вертикали, если текст выходит за пределы области div ⇐ CSS

[Anonymous]

Я создал железнодорожное приложение, которое получает данные о железнодорожном транспорте. Иногда информация об отправке через переход выходит за пределы разрешенной области div.
Как я могу автоматически прокручивать этот текст по вертикали, ЕСЛИ текст выходит за пределы назначенного div?
Я Я использую комбинацию CSS и JavaScript, но я не добавил к этому никакой анимации, так как не уверен, что это лучший способ подойти к этому. РЕДАКТИРОВАТЬ Сейчас я использую скроллер jquery, отлично работает по горизонтали, но у меня проблемы`

Код: Выделить всё

        function setupScrollers() {
var scrollSpace = $('.horizontal_scroll_space');
var scrollText = $('.scrollingtext');

var numberOfScrollers = scrollSpace.length;

for (var i = 0; i < numberOfScrollers; i++) {
if (scrollSpace[i].clientWidth < scrollText[i].clientWidth) {
scrollSpace[i].setAttribute("class", "active_scroller");
}
}

//create scroller for each element with "horizontal_scroller" class...
$('.active_scroller').SetScroller({
velocity: 70,
direction: 'vertical',
startfrom: 'top',
loop: 'infinite',
movetype: 'linear',
onstartup: 'play'
});
}

Код: Выделить всё

body {
background: #000;
color: #fff;
overflow: hidden;
width: 300px;
height: 300px;
font-size: 5vh;
}
div.horizontal_scroll_space, div.active_scroller {
position: relative;
height: 50px;
left: 5%;
width: 70%;
overflow: hidden;
}
div.scrollingtext {
position: absolute;
white-space: normal;
font-size: 80%;
color: #ECD2E1;
}

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

` определяет высоту, а не ширину вертикальной прокрутки**

Код: Выделить всё

 body {
background: #000;
font-family: 'Open Sans';
color: #fff;
overflow: hidden;
margin: 0;
width: 500px;
height: 5000px;
font-size: 6vh;
}

.depContainer {
overflow: hidden;
position: absolute;
top: 7%;
width: 100%;
height: 93%;
display: grid;
grid-gap: 0;
grid-template-rows: 20;
}

.depContainer>div {

padding: 20px 0;
font-size: 2vh;
font-weight: 700;
border-bottom: #ddd 2px solid;
}

.deps {
overflow: hidden;
position: absolute;
}

.rdue {
left: 1%;
width: 12%;
}

.rdest {
left: 13%;
width: 51%;
}

.rplatform {
left: 63%;
width: 11%;
text-align: center;
}

.rstatus {
left: 73.5%;
width: 26%;
text-align: right;
}

.rvias {
position: absolute;
overflow: hidden;
text-align: left;
left: 1%;
width: 98%;
font-size: 1.6vh;
margin-top: 6%;
max-height: 5%;
}

Код: Выделить всё

Due
Destination
Status
Platform
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi
erat, finibus id purus non, lobortis imperdiet elit. Praesent et felis rhoncus, maximus lectus eu,
volutpat ante. Fusce consequat ultricies nunc. In non eros tortor. Integer ultrices eu metus vitae
lobortis. Praesent pretium, tortor vitae efficitur pharetra, orci urna porta nibh, vel egestas neque
quam in erat. Aliquam lorem mauris, semper a sollicitudin at, consectetur quis ligula. Sed quis tortor
nec nisl pretium vehicula. Curabitur sed dui a erat malesuada efficitur.




Due
Destination
Status
Platform
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi
erat, finibus id purus non, lobortis imperdiet elit. Praesent et felis rhoncus, maximus lectus eu,
volutpat ante. Fusce consequat ultricies nunc. In non eros tortor. Integer ultrices eu metus vitae
lobortis. Praesent pretium, tortor vitae efficitur pharetra, orci urna porta nibh, vel egestas neque
quam in erat. Aliquam lorem mauris, semper a sollicitudin at, consectetur quis ligula. Sed quis tortor
nec nisl pretium vehicula. Curabitur sed dui a erat malesuada efficitur.

Подробнее здесь: https://stackoverflow.com/questions/786 ... e-div-area