OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to vertically autoscroll text, if the text overflows the div area

  • Thread starter Thread starter JDCov87
  • Start date Start date
J

JDCov87

Guest
I've created a rail app that pulls in rail data. Sometimes the via departure information overflows the allowed div area.

How can I automatically scroll that text vertically IF the text overflows the designated div?

I'm using a combination CSS and JavaScript but I haven't added in any animation to this as not sure of the beat way to approach this.


Code:
 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%;
    }

Code:
<div class="depContainer">

        <!-- Row 2 -->
        <div>
            <div id="RTime0" class="deps rdue">Due</div>
            <div id="RDest0" class="deps rdest">Destination</div>
            <div id="REstimatedTimeOfDepartureComment0" class="deps rstatus">Status</div>
            <div id="RStand0" class="deps rplatform">Platform</div>
            <div id="RVias0" class="deps rvias">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.</div>
        </div>

        <!-- Row 2 -->
        <div>
            <div id="RTime1" class="deps rdue">Due</div>
            <div id="RDest1" class="deps rdest">Destination</div>
            <div id="REstimatedTimeOfDepartureComment1" class="deps rstatus">Status</div>
            <div id="RStand1" class="deps rplatform">Platform</div>
            <div id="RVias1" class="deps rvias">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.</div>
        </div>


    </div>

<p>I've created a rail app that pulls in rail data. Sometimes the via departure information overflows the allowed div area.</p>
<p>How can I automatically scroll that text vertically IF the text overflows the designated div?</p>
<p>I'm using a combination CSS and JavaScript but I haven't added in any animation to this as not sure of the beat way to approach this.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> 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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="depContainer">

<!-- Row 2 -->
<div>
<div id="RTime0" class="deps rdue">Due</div>
<div id="RDest0" class="deps rdest">Destination</div>
<div id="REstimatedTimeOfDepartureComment0" class="deps rstatus">Status</div>
<div id="RStand0" class="deps rplatform">Platform</div>
<div id="RVias0" class="deps rvias">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.</div>
</div>

<!-- Row 2 -->
<div>
<div id="RTime1" class="deps rdue">Due</div>
<div id="RDest1" class="deps rdest">Destination</div>
<div id="REstimatedTimeOfDepartureComment1" class="deps rstatus">Status</div>
<div id="RStand1" class="deps rplatform">Platform</div>
<div id="RVias1" class="deps rvias">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.</div>
</div>


</div></code></pre>
</div>
</div>
</p>
 
Top