html - Firefox 无法滚动浏览带有隐藏滚动的元素中的导航键

Question

我有这个 fiddle :http://jsfiddle.net/c11khcak/13/ .我打算做的很简单 - 只需隐藏元素的滚动条。该元素应该像往常一样通过鼠标滚轮和向上/向下导航键滚动。这是我通过一些基本的 CSS 实现的:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child{
   height: 150px;
   width: 318px;
   overflow-y: scroll;
}

img {
    width: 318px; 
}

问题是，它在 Webkit 浏览器中工作正常，在 Firefox 中，虽然它可以通过鼠标滚轮滚动，但按向上/向下键不会滚动它。如何让它在 Firefox 中运行？

Answer 1

问题在于 div 的焦点标志 ( Ref Here )。

为了可靠地让div获得点击的焦点，就是给它提供一个tabindex。这取决于您的用例，您是想使用负数、零还是正数 tabindex .

If the value is a negative integer The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation

If the value is a zero The user agent must set the element's tabindex focus flag, should allow the element to be reached using sequential focus navigation, and should follow platform conventions to determine the element's relative order.

If the value is greater than zero The user agent must set the element's tabindex focus flag, should allow the element to be reached using sequential focus navigation, and should place the element in the sequential focus navigation order

要使您的示例正常工作，您需要做的就是:

<div class="child" tabindex="0">
   ...
</div>

演示 fiddle :http://jsfiddle.net/abhitalks/y1boh9v7/3/

这应该适用于所有浏览器。 (针对 IE-11、GC-39 和 FF-34 进行了测试)

---

这是相同的片段，其中包含隐藏滚动条的技术。您可以通过增加填充来完全隐藏滚动条。但是，为了便于使用，在此示例中将其保留得更窄。如果您决定隐藏滚动条，则应提供替代机制以使用鼠标滚动，例如使用 Javascript 的拖放式操作。

此片段中的图像将在单击滚动条时平移，或者通过单击图像然后使用键盘上下左右平移，或者通过触摸滑动。

片段:

div.scrollParent {
    height: 240px; width: 240px;
    border: 1px solid #eee;
    overflow: hidden;
}
div.scrollChild {
    height: 240px; width: 240px;
    padding: 0px 12px 12px 0px;
    overflow: auto; 
}
img { display: block; }

<div class="scrollParent">
    <div class="scrollChild" tabindex="0">
        <img src='http://lorempixel.com/320/320' />
    </div>
</div>

.