我有这个小提琴：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中工作？
问题在于相机的焦点标志（Ref Here）div。
为了可靠地获得div对点击的关注，请为其提供一个tabindex。是否使用负数，零或正数 取决于您的用例tabindex。
如果值为负整数，则用户代理必须设置元素的tabindex焦点标志，但不允许使用顺序焦点导航访问元素
如果值为零，则用户代理必须设置元素的tabindex焦点标志，应允许使用顺序焦点导航来访问元素，并应遵循平台约定确定元素的相对顺序。
如果值大于零，则用户代理必须设置元素的tabindex焦点标志，应允许使用顺序焦点导航来访问元素，并应将元素置于顺序焦点导航顺序中
为了使示例工作，您需要做的是：
<div class="child" tabindex="0">
...
</div>
演示小提琴：http : //jsfiddle.net/abhitalks/y1boh9v7/3/
这应该适用于所有浏览器。（针对IE-11，GC-39和FF-34测试）
这是相同的代码片段，其中包含隐藏滚动条的技术。您可以通过增加填充完全隐藏滚动条。但是，为了易于使用，在本示例中将其保留得较窄。如果您决定隐藏滚动条，则应提供使用鼠标滚动的替代机制，例如使用Java脚本的“平移”功能。
单击片段时，或单击图像，然后使用键盘上下左右鼠标平移或触摸滑动，此片段中的图像将平移。
片段：
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>。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句