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>

これで、下矢印/上矢印スクロールアクションが発生します。onscroll イベント引数を使用した onScroll イベントでの keyPress/Mouse インタラクションが原因で発生するスクロール アクションを特定する方法

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 に答える