1

標準のhtml<select>ボックスではカットされないため、カスタムスクロールボックスを作成しています（2つの列を表示する必要があり、<select>でこれを行う方法が見つかりませんでした）。とにかく、私はスクロール可能なテーブルを持っており、それは私が望むように機能しています。上矢印キーと下矢印キーを除いて、テーブル内の前後の要素を選択するのではなく、全体的なスクロールをトリガーします。

html<select>と上下の適切なバインディング http://jsfiddle.net/a5YJK/

適切な上下なしの私のカスタム選択 http://jsfiddle.net/8zgxA/3/

私が走るとき

$('#wrap *').scroll(function(e){});

マウスのスクロールと上矢印または下矢印を区別できません。どうすれば区別できますか？

4

2 に答える 2

1

スクロールイベントをチェックするe.keyCodeか、存在しないかを確認してください。e.which

$(window).on('keyup scroll', function(e){
    console.log(e.keyCode); //undefined for mouse scroll

    if(e.keyCode && e.keyCode == 40){
        //down arrow, scroll might occur, so prevent it or do whatever
    }
}); ​

デモ

于 2012-09-13T20:09:00.197 に答える
1 
<table onfocus="focused(1)" onblur="focused(0)" onkeypress="selectnext(event)">
.
.
.
</table>

<script type="text/javascript">
var currentrow = 0;
var tablefocused;
function focused(a)
{
switch(a)
{
case 1:
tablefocused = 1;
break;
case 0:
tablefocused = 0;
break;
}
}
function selectnext(e)
e.stopPropagation();
{
if(tablefocused==1)
{
switch(e.keyCode)
{
case 38:
currentrow = currentrow-1;
this.childNodes[currentrow].style.backgroundColor = "blue";
$('tr').css('background', '');
break;
case 40:
currentrow = currentrow+1;
this.childNodes[currentrow].style.backgroundColor = "blue";
$('tr').css('background', '');
break;
}
}
}
</script>

このコードからいくつかの詳細を省略しました。たとえば、「currentrow」は-1に移動しないでください。行をクリックすると、currentrowの値がその行に変更されます。

ああ、スクロールを防ぐには、stopPropagation（）関数を使用して、イベントがバブリングするのを防ぎます。

于 2012-09-13T20:57:31.740 に答える