Question

我正在尝试滚动固定div的内容子项。我试图滚动没有滚动条可见（使用鼠标滚动）。我已经尝试过在Stackoverflow和谷歌上遇到的所有解决方案，但没有成功。

请在这里找到问题的JSfiddle：

CSS：

#left-panel {
    position:fixed;
    height:100%;
    top:0px;
    left:0px;
    border:1px solid red;
    width:220px;
    overflow: hidden;
}

nav {
    position:relative;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
}

JS FIDDLE： http://jsfiddle.net/5Xg5v/2/

请注意，父div必须是固定的，且必须是100％高度。

提前谢谢！

Answer 1

你可以通过扩展nav元素的宽度并强制滚动条来破解跨浏览器。更新了JSFiddle。

nav {
    position:relative;
    height:100%;
    width: 110%;         /*  <----   */
    overflow-x:hidden;
    overflow-y:scroll;   /*  <----   */
}

当然，您需要根据需要调整百分比或使用calc( 100% + 15px )。

Answer 2

您可以尝试以下操作：

#left-panel {
    position:fixed;
    height:100%;
    top:0px;
    left:0px;
    border:1px solid red;
    width:220px;
    overflow:hidden;
}

nav {
   height:100%;
   overflow-y:auto;
   overflow-x:hidden;
   width:100%;
   padding-right: 15px;      
}

Example

Answer 3

您可以使用webkit设置滚动条的样式。

element::-webkit-scrollbar {styling here}

为了隐藏导航元素上的滚动条，您可以使用以下内容：

nav::-webkit-scrollbar {
    width:0!important;
}

使用CSS滚动内容而不使用滚动条

3 个答案: