CODEWITHSUNDEEP
javascriptjqueryhtmlscrolleventargs
Raja
Raja

Reputation: 219

Identify the scrolling action reason with in the on scroll event

I have use the following code snippet to display the table.

<div id="results" class="scrollingdatagrid" style="height: 200px;overflow: scroll;">

      <table id="mstrTable" cellspacing="0" border="1">
         <thead>
          <tr> 
            <th>File Number</th>
            <th>Date1</th>
            <th>Date2</th>
            <th>Status</th>
            <th>Num.</th>
          </tr>
        </thead>
        <tbody>
          <tr> 
            <td>KABC</td>
            <td>09/12/2002</td>
            <td>09/12/2002</td>
            <td>Submitted</td>
            <td>1</td>

          </tr>
          <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>

          <tr> 
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>3</td>
          </tr>
            <tr> 
                <td>WTSP</td>
                <td>09/15/2002</td>
                <td>09/15/2002</td>
                <td>In-Progress</td>
                <td>4</td>
            </tr>
            <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>

          <tr> 
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>3</td>
          </tr>
            <tr> 
                <td>WTSP</td>
                <td>09/15/2002</td>
                <td>09/15/2002</td>
                <td>In-Progress</td>
                <td>4</td>
            </tr>
            <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>

          <tr> 
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>3</td>
          </tr>
            <tr> 
                <td>WTSP</td>
                <td>09/15/2002</td>
                <td>09/15/2002</td>
                <td>In-Progress</td>
                <td>4</td>
            </tr>
            <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>

          <tr> 
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>3</td>
          </tr>
            <tr> 
                <td>WTSP</td>
                <td>09/15/2002</td>
                <td>09/15/2002</td>
                <td>In-Progress</td>
                <td>4</td>
            </tr>
            <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>

          <tr> 
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>3</td>
          </tr>
            <tr> 
                <td>WTSP</td>
                <td>09/15/2002</td>
                <td>09/15/2002</td>
                <td>In-Progress</td>
                <td>4</td>
            </tr>
            <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>

          <tr> 
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>3</td>
          </tr>
          <tr> 
            <td>WTSP</td>
            <td>09/15/2002</td>
            <td>09/15/2002</td>
            <td>In-Progress</td>
            <td>4</td>
          </tr>
        </tbody>
      </table>
    </div>

In this i have press down Arrow /UpArrow scrolling action happen . How to identify the scrolling action happens due to the keyPress/ Mouse interaction with in onScroll event using onscroll event args

Upvotes: 0

Views: 106

Answers (1)

chonerman
chonerman

Reputation: 135

I am not sure I understand exactly what you're after. Here is an example of how to capture the up, down, left and right arrows and which is clicked on your page example.

UPDATED FOR SCROLL DIRECTION

Working Example

var lastScrollTop = 0;

$(document).keydown(function (e) {
    var tmpCode = e.keyCode;
    switch (tmpCode) {
    case 37:
        console.log("left");
        break;
    case 38:
        console.log("up");
        break;
    case 39:
        console.log("right");
        break;
    case 40:
        console.log("down");
        break;
    default:
        console.log(tmpCode);
        break;
    }
});

$("#results").on("scroll", function (e) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        console.log("down scroll");
    } else {
        console.log("up scroll");
    }
    lastScrollTop = st;
});

Upvotes: 1

Related Questions