隐藏动态区域滚动条

问题描述 投票：0回答：2

我试图将滚动条隐藏在CSS中动态大小的元素中，并允许内容占据滚动条所在的空间。我设法通过在元素右侧添加一些额外的填充来隐藏该栏，将其推出 

overflow: hidden
div，但是内容不会扩展以填充滚动条占用的空间。

我不想对滚动条宽度使用任何静态值，因为这会在浏览器之间发生变化，并且某些浏览器（如 Chrome）会在缩放时更改滚动条宽度。

JSFiddle 示例，取消注释以隐藏滚动条。

带滚动条：

没有滚动条：

html css scrollbar
2个回答
1
投票

如果您想要一个可滚动的 div 但没有滚动条，请将其放置在父 div 内。将父 div 设置为溢出隐藏，将内部 div 设置为溢出自动。让父 div 比内部 div 稍微细一些，这样内部 div 的滚动条就不会显示。如果动态创建，只需使用 jQuery 或其他 js 在渲染时设置宽度即可。

.parentDiv {
   width: 301px;
   height: 450px;
   overflow: hidden;
}
    
.parentDiv .innerDiv {
   width: 320px;
   height: 450px;
   overflow: auto; 
}

PS：-我只是把它放在一起来展示效果。请注意，它在 CSS 中设置两个 div 的宽度。这样的效果不需要 JS 或 JQuery，但是动态设置样式规则则需要。或者使用 PHP 并在页面加载/渲染时加载宽度。您可能会研究 CSS 的“calc”，但我不知道不同浏览器对它的支持程度如何。或者 - 对 CSS 使用百分比，只需使父 div 的皮肤比内部 div 的皮肤更薄即可。

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <title>Scrollable Div Test</title>
    <meta charset="UTF-8" />
        <style>
        .parentDiv
        {
            width: 301px;
            height: 450px;
            overflow: hidden;
        }
    
    .parentDiv .innerDiv
        {
            width: 320px;
            height: 450px;
            overflow: auto; 
        }  
    
        </style>
    </head>
    
    <body>
    
    <div class="parentDiv"/>
        <div class="innerDiv"/>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
                <li>e</li>
                <li>f</li>
                <li>g</li>
                <li>h</li>
                <li>i</li>
                <li>j</li>
                <li>k</li>
                <li>l</li>
                <li>m</li>
                <li>n</li>
                <li>o</li>
                <li>p</li>
                <li>q</li>
                <li>r</li>
                <li>s</li>
                <li>t</li>
                <li>u</li>
                <li>v</li>
                <li>w</li>
                <li>x</li>
                <li>y</li>
                <li>z</li>
            </ul>
        </div>
    </div>
    </body>
    </html>
1
投票

设置溢出：隐藏；在 #scroll 上，但前提是您不想在其中滚动

#scroll {
  width: 100%;
  height: 100%;
  overflow-y: hidden; /*this is the part of the code which make the scroll bar visable*/
  background-color: aqua;
  /*padding-right: 32px; /* uncomment to remove scrollbar by pushing 32 px right*/
}

我不知道是否有办法在没有JS的情况下做到这一点，但这是我到目前为止的想法
使用JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
     $(function() {
    
       $("#scroll").mousewheel(function(event, delta) {
    
          this.scrollLeft -= (delta * 30);
    
          event.preventDefault();
    
       });
    
    });
</script>

请注意，您需要 JQuery 和一个名为 (jquery-mousewheel) 的 JQuery 插件https://github.com/jquery/jquery-mousewheel
或者你可以试试这个，这是另一种 JS，但这个是纯 JS https://github.com/kamlekar/slim-scroll

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.