How to disable linear-gradient when scroll to the bottom

Question

I am using the answer from Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div to achieve fading text at bottom

and a snippet of my code is below

<div className={styles.description}>
    {description}
</div>

.description {
        position: relative;
        overflow: auto;
        width: 640px;
        height: 495px;
        padding-right: 17px;
        text-align: justify;
        -webkit-mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
}

and the effect is like this

however, the fading effect is fix, so when I scroll to the bottom, it still exist, therefore, some lines in the end of text would eventually unclear. A simple way to solve this puzzle is add a extra transparent space in the end which large enough to expand the scrollbar, so that the text can get rid of fading out area. However, in my opinion, it seems not very elegant to me, so I wonder if there have methods can disable linear-gradient when scroll to the bottom. Really appreciate your help, many thanks