Question

我有一个简单的滚动条（类似于Google图片顶部的标签滚动条），它使用jquery / javascript。

<div class="chip-scroller widget">
    <a class="chip-scroller_nav chip-scroller_nav--prev">
        <span class="md-icon">arrow_back_ios</span>
    </a>
    <ul>
        <li>
            <a class="chip-scroller_chip">anchor</a>
        </li>
        <!-- more items here -->
    </ul>
    <a class="chip-scroller_nav chip-scroller_nav--next">
        <span class="md-icon">arrow_back_ios</span>
    </a>
</div>

UL（列表）已设置overflow-x: hidden，因此根据屏幕宽度和列表中项目的数量，某些项目在可见区域的左侧或右侧将不可见

在下面的示例中，左侧隐藏2个，可见3个，右侧隐藏1个。

(hidden) (hidden) [visible visible visible] (hidden)

该列表使用javascript进行定位，并在主菜单中使用每侧的上一个/下一个导航按钮进行导航。

我的问题是，无论是否可见，任何项目都可以集中显示，而集中显示意味着可以立即将它们显示出来。

但是，滚动条没有意识到事情已经改变，这破坏了我的设计。例如，当没有更多内容可沿特定方向滚动时，导航按钮可能仍会显示。

我尝试做的第一件事是使用 e.preventDefault（）尝试停止任何默认的浏览器操作，但是它仍然使该项可见。我正在使用“焦点”来捕获事件：

$("body").on("focus", ".chip-scroller_chip", moveFocus);

这似乎没有效果。

我可以使用 tabindex = -1 标记不可见的锚点，但我不想停止焦点事件的发生，只需从浏览器重新获得控制权即可。

任何想法都很棒。

Answer 1

如果要添加if焦点，该怎么办，用js分配另一个要对其执行操作的元素的类，并通过if检查是否有一个类.hassClass（），然后执行某件事，否则不要。

在创建元素时添加类。在您不想显示的类上，添加溢出：无，对其他对象执行所需的操作。

至少我会为此做准备。

被溢出隐藏的锚点变成焦点

1 个答案: