Question

我试图隐藏CSS中动态大小的元素中的滚动条，并允许内容占据滚动条所在的空间。我设法通过在我的元素右侧添加一些额外的填充来隐藏条形，将其推出overflow: hidden div，但是内容不会扩展以填充滚动条占用的空间。

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

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

使用滚动条：

没有滚动条：

Answer 1

如果你想要一个可滚动的div但没有滚动条，请将它放在父div中。将父div设置为隐藏溢出，将内部div设置为溢出auto。使父div比内部div略微更瘦，以便不显示内部div的滚动条。如果使用dynaymically创建，只需使用jQuery或其他js设置渲染时的宽度。

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

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

ps： - 我只是将它们放在一起以显示效果。请注意，它为两个div设置css的宽度。这样的效果不需要JS或JQuery，但动态设置样式规则。或者使用php并在页面加载/渲染时加载宽度。你可以为css投资“calc”，但我不知道在不同的浏览器中支持的程度如何。或者 - 使用css的percententages，只需使父div比nner 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>

Answer 2

设置溢出：隐藏;在#scroll上，但仅当你不想在其中滚动

时

<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>

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

<html>
  <head>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/semantic/dist/semantic.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">
  </head>
  <body>
    <div style="background:red; height:200px; width:100%;">
    Top content - should appear above the sidebar, like an app toolbar
    </div>
    <div id="app">
      <div class="ui left vertical inverted labeled icon sidebar menu">
        <a class="item">
            <i class="home icon"></i>
            Home
        </a>
        <a class="item">
            <i class="block layout icon"></i>
            Topics
        </a>
        <a class="item">
            <i class="smile icon"></i>
            Friends
        </a>
        <a class="item">
            <i class="calendar icon"></i>
            History
        </a>
        <a class="item">
            <i class="mail icon"></i>
            Messages
        </a>
        <a class="item">
            <i class="chat icon"></i>
            Discussions
        </a>
        <a class="item">
            <i class="trophy icon"></i>
            Achievements
        </a>
        <a class="item">
            <i class="shop icon"></i>
            Store
        </a>
        <a class="item">
            <i class="settings icon"></i>
            Settings
        </a>
      </div>
      <div class="pusher">
        Your site's actual content
      </div>
    </div>

    <script>
    function toggleSidebar()
    {
      $('#app .ui.sidebar')
        .sidebar({context:$('#app')})
        .sidebar('setting', 'transition', 'overlay')
        .sidebar('toggle');
    }

    document.addEventListener("DOMContentLoaded", function() {
      toggleSidebar();
    });
</script>

  </body>
</html>

请注意，您需要JQuery和JQuery插件（jquery-mousewheel）https://github.com/jquery/jquery-mousewheel
或者你可以尝试这个，它是另一个JS，但这个是纯JS https://github.com/kamlekar/slim-scroll

隐藏动态区域中的滚动条

2 个答案: