Scroll over first cell

When scrolling - first cell should be visible completely or not at all

by Taleeb Anwar

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

table,
tr,
td {
  border: 1px solid black;
}

td {
  padding-right: 100px;
}

div {
  width: 400px;
  overflow: auto;
}

JavaScript

var lastScrollLeft = 0;
var x = $('td:first').outerWidth();
$('div').scroll(function() {
  var documentScrollLeft = $('div').scrollLeft();
  if (lastScrollLeft > documentScrollLeft) {
    if (documentScrollLeft < x) {
      $('div').scrollLeft(0);
    }
  }
  else{
  	if (documentScrollLeft < x) {
      $('div').scrollLeft(x);
    }
  }
  lastScrollLeft = documentScrollLeft;
});