Как я могу автоматически прокручивать этот текст по вертикали, ЕСЛИ текст выходит за пределы назначенного div?
Я Я использую комбинацию CSS и JavaScript, но не добавлял к этому никакой анимации, так как не уверен в лучшем подходе к этому.
Код: Выделить всё
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