Question

我正在尝试将一个滚动条添加到firefox扩展程序，以便在窗口太小时显示。

我遇到的问题是滚动条从侧边栏的顶部到底部跨越整个范围，并且只在窗口太小时显示它。

具有我想要的功能的一个扩展是sage扩展，但是通过CSS和XUL搜索，我无法弄清楚它是如何工作的。

XUL文件

  <vbox flex="1" id="main" align="center" pack="end" maxwidth="300">
    <spacer height="10"/>
    <image id="logo" maxwidth="300"/>
    <spacer height="20"/>
    <vbox id="button" flex="1">
      <button id="a-button" label=""/>
      <spacer height="20"/>
      <listbox id="listbox1" width="300" maxwidth="300" rows="6">
        <listhead id="list-header">
          <listheader label=""/>
        </listhead>
    </listbox>
      <spacer height="20"/>
    </vbox>
    <tabbox id="details-box" maxwidth="300">
      <tabs id="tabs">
        <tab id=a"-label" label="" style="text-align: center;"/>
      </tabs>
      <tabpanels>
        <vbox>
            <button id="another-button" label="" />
        </vbox>
      </tabpanels>
    </tabbox>
    <spacer height="20"/>
    <vbox maxwidth="300">
        <description id="message" style="display: none;">
            <!-- updated with ajax -->
        <html:h1 id="header"/>
        <html:p id="body"/>
      </description>
    </vbox>
  <spacer flex="10"/>
  </vbox>
  <spacer flex="10"/>
</page>

相关CSS

/* Main */

{
    padding: 0;
    margin: 0;
}

#sidebar {
    background-color: #fff;
    font: 10pt "arial", "sans-serif";
    line-height: 11pt;
}

vbox#main {
    padding-left: 20px;
    padding-right: 20px;
    /* min-height: 600px; */
    min-width: 330px;
    overflow-x: hidden;
    overflow-y: auto;
}

当前的样子

Example Screenshot http://img203.imageshack.us/img203/7209/screenshot20100805at201.png

Sage Extension中的预期效果

Sage Relevant Screenshots http://img193.imageshack.us/img193/9206/sageexample.png

Answer 1

问题是vbox #main不是唯一的子节点。我还有一个panel，它会根据某些动作弹出。

通过移动vbox＃main内部的面板，vbox #main将跨越侧边栏的整个空间。

将滚动条添加到firefox扩展侧边栏

1 个答案: