html - "Sticky"侧边栏垂直溢出

Question

我们的页面上有一个粘性侧面板，使用以下非常简单的 CSS 实现:

position: fixed;
top:62px;
bottom:10px;

top 和 bottom 属性创建所需的边距。

问题在于此面板包含多个 Accordion 式元素，展开其中一些会导致内容溢出屏幕底部并变得不可见/无法访问。在上面的 css 样式中添加一个 overflow:auto; 规则几乎解决了这个问题，方法是插入一个允许用户垂直滚动以查看可能隐藏的内容的滚动条。然而，这会产生两个滚动条——一个用于主导航，一个用于侧边栏——感觉笨拙且不直观。相反，我想让“固定”元素在溢出时与主滚动条一起滚动。我知道这基本上会使它不是一个固定元素，因此恐怕我将不得不求助于 JS 来实现这一点——但是有没有人有更干净的 html/css-处理这个的唯一方法？

Answer 1

我不确定这是否是您所需要的，但希望它能对您有所帮助。

#container1 {
    height: 400px;
    width: 200px;
    overflow: hidden;
    position: fixed;
    top: 62px;
    bottom: 10px;
    background: #888;
}

#container2 {
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 20px; /*Adjust this for cross-browser compatibility */
}

#container2 ul li {
    height: 300px;
}

html, body {
    height: 99%;
    overflow:hidden;
}

<div id="container1">
    <div id="container2">
        <ul>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
        </ul>
    </div>
<div>

JSFiddle

---

同样在 chrome 中你可以试试:

::-webkit-scrollbar { 
     display: none; 
}

但是这个片段只适用于 chrome，所以我宁愿使用上面的。