javascript - Tinyscrollbar とタブ キーの相互作用

Question

tinyscrollbar とのタブ キーの相互作用に関する問題を解決する方法。タブキーを押して表示されていない入力にジャンプすると、レイアウトが破壊されたり、スクロールバーが消えたりします。それを解決するにはどうすればよいですか?

Answer 1

これは私が行ったことです:要素に属性を追加しtabindexて、要素がtabキーまたはマウスのクリックからフォーカス状態を受け取ることができるようにします:

<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);
    };

そして.keystep機能後initialize()

    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