全部，
我正在实现一个类似 jQuery 滑块的“Coda”（我正在使用 Niall Doherty 的出色实现：http://www.ndoherty.biz/2009/10/coda-slider-2/）。
一般来说，效果很好。
但是，我遇到的问题是……每个“面板”都包含几个文本输入。如果用户到达面板中的最后一个输入，然后单击 [TAB]（或 iPad 上的“下一步”按钮），Safari 会自动移动滑动包装以显示下一个文本输入。
当然，它只是滑动包装器，刚好足以让下一个文本输入进入视图 - 不足以让整个下一个面板进入视图。
换句话说 - 假设每个面板的宽度为 600 像素，而我有三个面板。
因此，如果用户到达第一个面板上的最后一个输入，然后单击 TAB，我希望包装器移动 600 像素以使下一个面板完全进入视图。但是，浏览器只是将其滑动到足以看到下一个文本输入。
有没有人遇到过这个问题，并提出了一个可靠的解决方案？
非常感谢您提供任何建议和见解！
【问题讨论】：
标签： jquery coda-slider
哈！我想通了！
问题在于，当输入超出可见区域时，浏览器会滚动 div，使其可见。由于您的 #coda-slider 或您所称的任何 id 没有滚动条，因此您无法看到正在发生的事情，也无法手动将其移回。
注意，coda-slider 不会改变滚动位置，所以即使 coda-slider 移动，它仍然会偏移滚动偏移量。
但是，只要#coda-slider 更改滚动位置，每次输入获得焦点，您都可以简单地将滚动位置设置为 0。然后，您可以找出输入在哪个选项卡中并触发 coda 来实现它的魔力。如果您的内容高度不同，您也可以使用 scrollTop(0)。
$('#coda-slider-1').scroll( function() {
$('#coda-slider-1').scrollLeft(0);
$('#coda-slider-1').scrollTop(0);
});
$('input').focus( function() {
var tabindex = $(this).parents('.panel').prevAll('.panel').size() + 1;
$('.tab' +tabindex +' > a').trigger('click');
});
此处示例：
更新：
Safari 发生了一些更奇怪的事情。这不起作用。
更新2：
焦点和滚动的顺序在 Safari 中似乎有一种奇怪的效果。为跨浏览器支持更新示例：
更新3：
添加代码（在下面的 jsfiddle 示例中）以解决 coda-slider 错误，即使单击同一选项卡仍会调用 animate。在某些情况下，这可能会导致选项卡切换似乎延迟，尤其是在快速切换输入时。
【讨论】：