Javascript 使用jQuery自定义滚动条时，表单字段之间的选项卡出现问题

我正在做一个项目，为网站提供一个插销工具，它大量使用jQuery。演示/设计是至关重要的，我想用外观更好的东西取代浏览器对html元素应用的标准（丑陋）滚动条，使其内容溢出

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

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

http://baijs.nl/tinyscrollbar/

我也尝试过其他方法，但在所有演示/示例中，内容都是纯文本。我已经对此做了很多搜索，但似乎没有人尝试将这些插件用于基于表单的内容

所有这些插件的工作方式似乎或多或少都是一样的，我可以确切地看到发生了什么以及为什么，但我只是想知道是否还有其他人遇到过这个问题和/或找到了解决方案

此问题可以通过以下方式轻松复制（使用tinyscrollbar插件）：

将此添加到标准html测试页-

CSS:

#tinyscrollbartest{宽度：520px；高度：250px；右填充：20px；背景色：#eee；}
#tinyscrollbartest.视口{宽度：500px；高度：200px；溢出：隐藏；位置：相对；}
#tinyscrollbartest.overview{列表样式：无；位置：绝对；左侧：0；顶部：0；}
#tinyscrollbartest.滚动条{位置：相对；浮动：右侧；宽度：15px；}
#tinyscrollbartest.track{background:#d8eefd；高度：100%；宽度：13px；位置：相对；填充：0 1px；}
#tinyscrollbartest.thumb{高度：20px；宽度：13px；光标：指针；溢出：隐藏；位置：绝对；顶部：0；}
#tinyscrollbartest.thumb.end{溢出：隐藏；高度：5px；宽度：13px；}
#tinyscrollbartest.thumb，#tinyscrollbartest.thumb.end{背景色：#003d5d；}
#tinyscrollbartest.disable{display:none；}

Html:

这里有一个文本字段：
...
//大量内容迫使滚动条出现，
//然后把下一个区域推到看不见的地方。。
...
这是另一个领域：

插件引用（假设还引用了jquery库等）：

Jquery代码：

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

$（文档）.ready（函数（）{
$（'tinyscrollbertest'）。tinyscrollbar（）；
});

---

现在，单击第一个文本字段，使其具有焦点，按tab键移动到下一个文本字段，看看会发生什么。

我理解您的问题。。但很难找到一个好的解决办法。您可以尝试在表单元素上设置焦点事件。并让此事件触发tinyscrollbar的scrollbar_update函数。可以将当前具有焦点的表单元素的offsetTop设置为methods参数。我想那会管用的

$（'formelements'）。焦点（函数（）{ 你的滚动条.tinyscrollbar\u更新（this.offsetTop）；

---

});

我理解你的问题。。但很难找到一个好的解决办法。您可以尝试在表单元素上设置焦点事件。并让此事件触发tinyscrollbar的scrollbar_update函数。可以将当前具有焦点的表单元素的offsetTop设置为methods参数。我想那会管用的

$（'formelements'）。焦点（函数（）{ 你的滚动条.tinyscrollbar\u更新（this.offsetTop）；

---

});

我必须用自己的标签覆盖标准标签功能：

  $(".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();
            });
          }
        }
      }); 
    }
  });

---

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

我不得不用自己的标签覆盖标准标签功能：

  $(".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();
            });
          }
        }
      }); 
    }
  });

这是一个有点烦人，必须等待滚动，但我没有看到任何其他选项

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

  $(".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();
            });
          }
        }
      }); 
    }
  });