Firefox 中嵌套 div 的滚动行为

Question

我需要将一张宽而长的桌子放在一个相对短而窄的容器中，并且我希望保持桌头始终可见。我已经让它工作了，正如您在下面的 JSFiddle 中看到的那样。

http://jsfiddle.net/chemLk1z/1/

重要的代码是这样的：

<div id="h">
    <div id="v">
        <table> [... 10 rows of content ...]
    </div>
</div>

使用CSS：

#h { 
    width: 300px; 
    height: 100px;     
    overflow-x: scroll; 
    overflow-y: hidden;
}

#v {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    height: 100px;
    overflow-x: hidden; 
    overflow-y: scroll;
}

table {
    width: 500px;
    /* Height will be more due to content. */
}

正如您在 JSFiddle 中看到的，Chrome 上的滚动体验非常棒。但在 Firefox (v38.0.5 Mac OS X) 上我无法同时水平和垂直滚动，我需要等待 10 秒左右才能允许我在另一个维度滚动。

这是为什么，我能做些什么来解决它？

Answer 1

这个配置让我的垂直水平滚动切换更加舒适：

• 导航至

  about:config

  – 如果出现任何警告，请接受风险
• 将

  mousewheel.transaction.timeout

  设置为 20。

该值是以毫秒为单位的延迟，默认值高达 1500 毫秒！

有关更多信息，请参阅这些 official 和 unofficial wiki 页面。