使用 jQuery 自定义滚动条时表单字段之间的 Tab 键切换问题

Question

我正在开展一个项目，为网站提供一个附加工具，该工具大量使用了 jQuery。演示/设计至关重要，我想用更好看的东西来替换浏览器对内容溢出的 html 元素应用的标准（丑陋）滚动条。

有许多 jQuery 插件可以应用自定义滚动条并允许通过 CSS 进行样式设置，这很棒，但是我尝试过的所有插件似乎都遇到了同样的问题：如果可滚动内容包含带有文本字段的表单等等，字段之间的选项卡不会激活滚动条，并且在某些情况下可能会完全搞乱自定义滚动条布局。

我尝试过的两个插件示例：

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 设置为methods 参数。我认为这会起作用。

$('formelements').focus(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();
            });
          }
        }
      }); 
    }
  });

等待滚动有点烦人，但我没有看到任何其他选项。