Demo page

Question

我有这个小提琴：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。

如果值为负整数，则用户代理必须设置   element的tabindex焦点标志，但不应该允许元素   使用顺序焦点导航达到

如果值为零用户代理必须设置元素的tabindex   焦点标志，应该允许使用顺序到达元素   焦点导航，应遵循平台约定来确定   元素的相对顺序。

如果值大于零，则用户代理必须设置   element的tabindex焦点标志，应该允许到达元素   使用顺序焦点导航，并应将元素放在   顺序焦点导航顺序

为了您的示例，您需要做的就是：

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

演示小提琴：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>

Answer 2

这看起来就是这种情况，因为Firefox没有关注点击.child。您可以通过js：

解决这个问题

$(function() {
    $('.child').on('click', function(e) {
        $('.child').focus();
    });
});

当您在儿童内部单击时，它将获得焦点，您可以使用箭头向上/向下滚动。

请参阅http://jsfiddle.net/c11khcak/14/（在Firefox 36.0a2中测试）

Answer 3

你可以这样做：

HTML（点击/聚焦div时工作的键）

<div class="child" tabindex='1'>

CSS

.parent{
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid black;
  overflow: hidden;
}
.child{
  overflow-y: scroll;
  position:absolute;
  top:0; right:-18px; left:0; bottom:-18px;
}

img {
  width: 318px; 
  vertical-align:bottom;
}

Firefox无法滚动隐藏滚动元素中的导航键

3 个答案:

HTML（点击/聚焦div时工作的键）

CSS

Demo page