Jquery tinyscrollbar.js的键盘控件
我想为小小的滚动条脚本添加键盘控件。我不太擅长javascript。我知道我可以使用jquery keypress（）函数截取箭头键（38,40），然后通过更改其css top属性滚动overview div 我可以在tinyscrollbar插件之外完成这项工作，但我希望使用插件中已有的功能来完成这项工作 关于如何开始这项工作的任何指导都将是一个很大的帮助。谢谢Jquery tinyscrollbar.js的键盘控件,jquery,keyboard-events,tinyscrollbar,Jquery,Keyboard Events,Tinyscrollbar,我想为小小的滚动条脚本添加键盘控件。我不太擅长javascript。我知道我可以使用jquery keypress（）函数截取箭头键（38,40），然后通过更改其css top属性滚动overview div 我可以在tinyscrollbar插件之外完成这项工作，但我希望使用插件中已有的功能来完成这项工作 关于如何开始这项工作的任何指导都将是一个很大的帮助。谢谢 有关更多信息，请查看。和。您必须扩展此插件以支持按键和上键事件，并添加根据这些按键滚动的功能。插件中当前的滚动功能直接与使用鼠标或鼠
有关更多信息，请查看。和。您必须扩展此插件以支持按键和上键事件，并添加根据这些按键滚动的功能。插件中当前的滚动功能直接与使用鼠标或鼠标滚轮进行拖动有关 或者，您可以使用其他内置键盘事件的设备。
例如，我在插件中添加了一个新功能，并用它来更新scroll on keydown事件 添加到插件的代码：
// define the added function
jQuery.fn.tinyscrollbar_updatescroll = function(sScroll)
{
return jQuery( this ).data( 'tsb' ).updatescroll( sScroll );
};
// end of added function definition
function Scrollbar( root, options )
{
var oSelf = this
, oWrapper = root
, oViewport = { obj: jQuery( '.viewport', root ) }
, oContent = { obj: jQuery( '.overview', root ) }
, oScrollbar = { obj: jQuery( '.scrollbar', root ) }
, oTrack = { obj: jQuery( '.track', oScrollbar.obj ) }
, oThumb = { obj: jQuery( '.thumb', oScrollbar.obj ) }
, sAxis = options.axis === 'x'
, sDirection = sAxis ? 'left' : 'top'
, sSize = sAxis ? 'Width' : 'Height'
, iScroll = 0
, iPosition = { start: 0, now: 0 }
, iMouse = {}
, touchEvents = 'ontouchstart' in document.documentElement
;
function initialize()
{
oSelf.update();
setEvents();
return oSelf;
}
// the new added function using the wheel function
this.updatescroll = function( sScroll )
{
if( oContent.ratio < 1 )
{
iScroll -= sScroll;
iScroll = Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll ));
oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
oContent.obj.css( sDirection, -iScroll );
}
};
// end of added function
jQuery('body').keydown(function (event) {
if (event.keyCode == 38) {
// up arrow
$('#scrollbar1').tinyscrollbar_updatescroll(40);
} else if (event.keyCode == 40) {
// down arrow
$('#scrollbar1').tinyscrollbar_updatescroll(-40);
}
});