0

我使用以下代码片段来显示表格。

<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>

在此我按下箭头/UpArrow 滚动动作发生。如何使用 onscroll 事件参数识别由于 keyPress/鼠标与 onScroll 事件中的交互而发生的滚动动作

4

1 回答 1

1

我不确定我是否完全了解您的需求。这是一个如何捕获向上、向下、向左和向右箭头的示例，并且在您的页面示例中单击了该箭头。

更新滚动方向

工作示例

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;
});
于 2014-02-07T06:01:44.433 回答