jqueryを使ってキーを上下にスクロールするにはどうすればいいですか

Question

ここにはJSFIDDLEというリンクがあります。私は上下のキーを使用してダイアログボックス内をスクロールしようとしています。私はマウスを使ってスクロールすることができますが、キーを使って上下にスクロールする方法を知りました。これまで私が試みてきたことがあります。

var element = document.getElementById("scroll-to-here"); 
     element.scrollIntoView({block: "end", behavior: "smooth"}); 

実際には15pxをスクロールしようとしています。キーを上下に20px上または下に移動します。

Answer 1

使用scrollTop機能：あなたのケースで

$("#yourElement").scrollTop(10); 

、押されたボタンに応じてスクロールトップを増減。

var $el = $("#yourElement"); 
$el.scrollTop($el.scrollTop() - 10); //move the scrollbar upwards 

この例を参照してください。

https://jsfiddle.net/po6bokz6/

Answer 2

はこれを試してみてください。

$("#dialog-message").dialog({ 
    modal: true, 
    draggable: false, 
    resizable: false, 
    position: ['center', 'top'], 
    show: 'blind', 
    hide: 'blind', 
    width: 400, 
    dialogClass: 'ui-dialog-osx', 
    buttons: { 
     "I've read and understand this": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$(document).keydown(function(e) { 
switch(e.which) { 

    case 38: // up 
    var y = $('#to-scroll').scrollTop(); //your current y position on the page 
    $('#to-scroll').scrollTop(y-150); 


    break; 

    case 39: // right 
    break; 

    case 40: // down 
    var y = $('#to-scroll').scrollTop(); //your current y position on the page 
     $('#to-scroll').scrollTop(y+150); 


    break; 

    default: return; // exit this handler for other keys 
} 
//e.preventDefault(); // prevent the default action (scroll/move caret) 
}); 

は、この例を参照してください。

http://jsfiddle.net/db5SX/9488/