1

全部，

我正在实现一个类似 jQuery 滑块的“Coda”（我正在使用 Niall Doherty 的出色实现：http ://www.ndoherty.biz/2009/10/coda-slider-2/ ）。

一般来说，它工作得很好。

但是，我遇到的问题是……每个“面板”都包含几个文本输入。如果用户到达面板中的最后一个输入然后单击 [TAB]（或 iPad 上的“下一步”按钮），Safari 会自动移动滑动包装以将下一个文本输入显示在视图中。

当然，它只是滑动包装器，刚好足以让下一个文本输入进入视图 - 不足以让整个下一个面板进入视图。

换句话说 - 假设每个面板的宽度为 600 像素，而我有三个面板。

因此，如果用户到达第一个面板上的最后一个输入，然后单击 TAB，我希望包装器移动 600 像素以使下一个面板完全进入视图。但是，浏览器只是将其滑动到足以使下一个文本输入可见。

有没有人遇到过这个问题，并提出了一个强大的解决方案？

非常感谢您的任何建议和见解！

4

1 回答 1

2

哈！我想到了！

问题是当输入超出可见区域时，浏览器会滚动div 使其可见。由于您的#coda-slider 或您所称的任何 id 没有滚动条，因此您看不到正在发生的事情，也无法手动将其移回。

请注意，coda-slider 不会改变滚动位置，因此即使 coda-slider 移动，它仍然会被滚动偏移量偏移。

但是，您可以简单地将滚动位置设置为 0每次输入获得焦点每当 #coda-slider 更改滚动位置时。然后，您可以找出输入在哪个选项卡中并触发 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');
});

这里的例子：

http://jsfiddle.net/u99AJ/

更新：

Safari 正在发生更奇怪的事情。这不起作用。

更新2：

焦点和滚动的顺序在 Safari 中似乎有一种奇怪的效果。为跨浏览器支持更新的示例：

http://jsfiddle.net/u99AJ/4/

更新3：

添加了代码（在下面的 jsfiddle 示例中）以解决 coda-slider 错误，animate即使单击同一选项卡仍会调用该错误。在某些情况下，这可能会导致选项卡切换似乎延迟，尤其是在快速切换输入时。

http://jsfiddle.net/u99AJ/7/

于 2010-12-10T21:58:10.880 回答