使用 CSS 在没有滚动条的情况下滚动内容 [英] Scroll content without scrollbar using CSS

问题描述

我正在尝试滚动固定 div 的内容子级.我试图在滚动条不可见的情况下滚动(使用鼠标滚动).我几乎尝试了我在 Stackoverflow 和谷歌上遇到的所有解决方案，但没有成功.

I am trying to scroll a content child of a fixed div. I am trying to scroll without the scroll bar being visible (using the mouse scroll). I have pretty much tried all the solutions I came across on Stackoverflow and on google in general but no success.

请在这里找到问题的JSfiddle:

Please find here the JSfiddle of the problem:

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 小提琴:http://jsfiddle.net/5Xg5v/2/

请注意，父 div 必须是固定的，并且必须是 100% 的高度.

Please note that the parent div must be fixed and must be 100% height.

先谢谢你！

推荐答案

你可以通过扩展导航元素的宽度和强制滚动条来跨浏览器破解它.更新了 JSFiddle.

You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.

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

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

Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).

这篇关于使用 CSS 在没有滚动条的情况下滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！