Question

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

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

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

问题是这个面板包含几个手风琴式元素，并且扩展其中一些元素会导致内容溢出屏幕底部并变得不可见/不可访问。通过插入允许用户垂直滚动以查看可能隐藏内容的滚动条，将overflow:auto;规则添加到上述css样式几乎可以解决问题。然而，这会产生两个滚动条 - 一个用于主导航，一个用于侧边栏 - 感觉笨重不直观。相反，我想要修复＆＃34;固定＆＃34;元素在溢出时滚动主滚动条。我知道这基本上会使它不成为一个固定的元素，因此我不得不诉诸JS来实现这一点 - 但是有人有一个更干净的， html / css-only方式处理这个？

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，所以我宁愿使用上面的代码。

Answer 2

让我试着帮忙。使用Panel-body class selector来处理此问题。首先你应该做很多事情，比如div的宽度和第二个div。您可以设置隐藏滚动条，如下所示：

.panel-body {
    height:300px;
    overflow:auto;
    margin-right:0px; // when it shows scrollbar, you need to set it MINUS.
}

其次，当用户调整浏览器窗口大小并且您需要管理与div宽度相关的媒体查询时，您也会注意到。

这是 DEMO 。

＆＃34;粘＆＃34;侧边栏垂直溢出

2 个答案: