jQueryカスタムスクロールバーを使用しているときにフォームフィールド間をタブで移動する問題

Question

jQueryを頻繁に使用するウェブサイト用のボルトツールを提供するプロジェクトに取り組んでいます。プレゼンテーション/デザインは非常に重要です。ブラウザで適用された標準（醜い）スクロールバーをhtml要素に置き換えて、内容が溢れているように見せています。

カスタムスクロールバーを適用し、CSSを使ってスタイリングすることができるjQueryプラグインが数多くありますが、これは私が試したすべてのものが同じ問題を抱えているようです。スクロール可能なコンテンツにフィールド間のタブ移動はスクロールバーをアクティブにせず、場合によってはカスタムスクロールバーのレイアウトを完全に崩壊させる可能性があります。プラグインの

二つの例は、私が試した：私も他の人が試してみた

http://manos.malihu.gr/jquery-custom-content-scroller http://baijs.nl/tinyscrollbar/が、すべてのデモ/例のコンテンツプレーンテキストです。私はすでにこれについて多くの検索を行ってきましたが、フォームベースのコンテンツでこれらのプラグインを使用しようとした人はいないようです。

これらのプラグインは多少同じように動作するようですが、何が起きているのか、理由は分かりますが、他の誰かがこの問題を抱えているか、

次のように、この問題は簡単に（tinyscrollbarプラグインを使用して）複製することができます。

は、標準のHTMLテストページにこれを追加 -

CSS：

<style> 
    #tinyscrollbartest { width: 520px; height: 250px; padding-right: 20px; background-color: #eee; } 
    #tinyscrollbartest .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; } 
    #tinyscrollbartest .overview { list-style: none; position: absolute; left: 0; top: 0; } 
    #tinyscrollbartest .scrollbar { position: relative; float: right; width: 15px; } 
    #tinyscrollbartest .track { background: #d8eefd; height: 100%; width: 13px; position: relative; padding: 0 1px; } 
    #tinyscrollbartest .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; } 
    #tinyscrollbartest .thumb .end { overflow: hidden; height: 5px; width: 13px; } 
    #tinyscrollbartest .thumb, #tinyscrollbartest .thumb .end { background-color: #003d5d; } 
    #tinyscrollbartest .disable { display: none; } 
</style> 

HTML：

を

<div id="tinyscrollbartest"> 
    <div class="scrollbar"> 
     <div class="track"> 
      <div class="thumb"> 
       <div class="end"></div> 
      </div> 
     </div> 
    </div> 
    <div class="viewport"> 
     <div class="overview"> 
      </p>Here's a text field: <input type="text"/><p> 
      ... 
      // lots of content to force scrollbar to appear, 
      // and to push the next field out of sight .. 
      ... 
      <p>Here's another field: <input type="text"/></p> 
     </div> 
    </div> 
</div> 

プラグインリファレンス（jqueryライブラリなども参照されていると仮定します） ：

<script type="text/javascript" src="scripts/jquery.tinyscrollbar.min.js"></script> 

のjQueryコード：今すぐ

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#tinyscrollbartest').tinyscrollbar(); 
    }); 
</script> 

にフォーカスがあるので、最初のテキストフィールドをクリックは、次のいずれかに移動し、何が起こるかを確認するために、Tabキーを押します。

Answer 1

私はあなたの問題を理解しています。しかし、これに対して良い解決策を見つけるのは難しいです。フォーム要素にフォーカスイベントを設定しようとする可能性があります。このイベントがtinyscrollbarのscrollbar_update関数をトリガーさせる。現在フォーカスを持っているフォーム要素のoffsetTopをメソッドのパラメータとして設定できます。それはうまくいくと思う。

$（ 'formelements'）フォーカス（function（）{ YourScrollbar.tinyscrollbar_update（this.offsetTop）; }）;

Answer 2

私は自分自身で標準タブ移動の機能を上書きする必要がありました：

$(".scrollable").each(function() { 
    if (!$(this).data("scrollbar")) 
    { 
     $(this).data("scrollbar", new Scrollbar({ 
     holder:$(this) 
     })); 
     $(this).find("input").bind("keydown", function(e) 
     { 
     var keyCode = e.keyCode || e.which; 

     if (keyCode == 9) 
     { 
      e.preventDefault(); 

      var scrollTo = $(this); 

      if (e.shiftKey) 
      { 
      var nextInput = $(this).prevAll("input:not([type=hidden])").first(); 
      scrollTo = nextInput.prevAll("input:not([type=hidden]), label").first(); 
      } 
      else 
      { 
      var nextInput = $(this).nextAll("input:not([type=hidden])").first(); 
      } 

      if (nextInput.length) 

      { 
      console.log(scrollTo); 
      $(this).closest(".scrollable").data("scrollbar").scrollTo(scrollTo, function() 
      { 
       nextInput.focus().select(); 
      }); 
      } 
     } 
     }); 
    } 
    }); 

それは、スクロールを待つが、私は他のオプションが表示されていない持って少し迷惑なんです。