Tinyscrollbar和tab键交互

Tinyscrollbar and tab key interaction

本文关键字：交互 tab Tinyscrollbar      更新时间：2023-09-26

如何解决与tinyscrollbar的tab键交互问题。当我按tab键跳到不在视图中的输入时，我会得到破坏的布局，滚动条消失，等等。如何解决这个问题？

这就是我所做的：向元素添加一个tabindex属性，这样元素就可以从选项卡键或鼠标点击接收焦点状态：

<div class="scroll-area" tabindex="1">
   <div class="viewport">
     <div class="overview">
       … CONTENT …
     </div>
   </div>
   <div class="scrollbar">
     <span class="track"><span class="thumb"></span></span>
   </div>
</div>

接下来，我在TinyScrollbar插件中创建此函数，以添加键盘支持并启用:focus:上的键盘导航

$.fn.tinyscrollbar = function(params) {
    var options = $.extend({}, $.tiny.scrollbar.options, params),
        $this = this;
    $this.each(function() {
        $(this).data('tsb', new Scrollbar($(this), options));
        // Enable keyboard support on focus
        $this.on('focus', function () {
            $(this).on('keydown', function (e) {
                if (e.keyCode == 38 || e.keyCode == 37) {
                    $(this).tinyscrollbar_keystep(40); // step 40px on single keypress
                    return false;
                } else if (e.keyCode == 40 || e.keyCode == 39) {
                    $(this).tinyscrollbar_keystep(-40); // step -40px on single keypress
                    return false;
                }
            });
        });
    });
    return $this;
};

然后，创建.tinyscrollbar_keystep()以更新.tinyscrollbar_update():下方的滚动步骤

    $.fn.tinyscrollbar_update = function(sScroll) {
        return $(this).data('tsb').update(sScroll);
    };
    // Add this functionality for scroll update on keypress (in this case)
    $.fn.tinyscrollbar_keystep = function(sScroll) {
        return $(this).data('tsb').keystep(sScroll);
    };

initialize() 后的.keystep功能

    function initialize() { … }
    this.keystep = 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);
        }
    };

演示：http://jsbin.com/zaqogidexese/1/edit

我在这里有类似的情况，这是我对表单输入字段的解决方案：

$(document).on('keydown',function(e) {
    switch (e.keyCode ? e.keyCode : e.which) {  
        case 9: // Tab
            if (e.target.localName == 'input') {
                content.tinyscrollbar_update($(e.target).position().top); 
            }
        break;
    }
});

如果每个输入都有任何包装器元素，请将".position（）.top"更新为".pparent（）.position

相关文章：