JSFiddle - React, Tailwind, and code Playground

by dmitryboz21

HTML

<div class="outer">
    <div class="inner" id="scroll">
        <table>
            <tbody>
                <tr>
                    <th>Lorem ipsum.</th>
                    <td>Inventore, at.</td>
                    <td>Facilis, voluptatum.</td>
                    <td>Laboriosam, voluptatibus.</td>
                    <td>Voluptatibus, eaque!</td>
                    <td>Molestiae, cupiditate!</td>
                    <td>Vel, odio.</td>
                    <td>Maxime, dicta.</td>
                    <td>Modi, laboriosam.</td>
                    <td>Pariatur, non.</td>
                    <td class="corzina">В корзину</td>
                </tr>
                <tr>
                    <th>Lorem ipsum.</th>
                    <td>Saepe, voluptas?</td>
                    <td>Doloribus, quidem.</td>
                    <td>Omnis, nam!</td>
                    <td>Culpa, ut.</td>
                    <td>Ex, est?</td>
                    <td>Suscipit, ab.</td>
                    <td>Ex, doloremque?</td>
                    <td>Cum, libero.</td>
                    <td>Officia, perspiciatis!</td>                    
                    <td class="corzina">В корзину</td>
                </tr>
                <tr>
                    <th>Lorem ipsum.</th>
                    <td>Mollitia, provident!</td>
                    <td>Quae, sit.</td>
                    <td>Sapiente, repellat.</td>
                    <td>Molestias, distinctio?</td>
                    <td>Tempora, omnis!</td>
                    <td>Officiis, ex.</td>
                    <td>Repellat, quae.</td>
                    <td>Porro, delectus?</td>
                    <td>Voluptatum, porro.</td>
                    <td class="corzina">В корзину</td>
                </tr>
                <tr>
                    <th>Lorem ipsum.</th>
                    <td>Animi, quisquam!</td>
                    <td>Dicta, aliquam.</td>
                    <td>Ea, nisi.</td>
                    <td>Rem,...

SCSS

table {
    width: 100%;
}
.corzina {
    background-color: #0074d9;
    color: #fff;
    position: absolute;
    right: 0;
    width: 100px;
    &:hover{
      background: green;
    }
}
.outer {
    position: relative
}
.inner {
    overflow-x: scroll;
    overflow-y: visible;
    width: calc(100% - 100px);
    margin-right: 100px;
}
td, th{
  border: 1px solid grey;
}

JavaScript

$('#scroll').scroll(function(){
console.log($('#scroll').scrollLeft()+"    width="+($('#scroll table tbody').width()-$('#scroll').width()));

});
//.scrollTop()