Question

在我的网页上，我有一个溢出属性设置为自动的div - 如果内容太大，则会出现滚动条。现在我想让这个滚动条不可见，这样我仍然可以在这个div中滚动，但是没有看到这个栏。我真的很感激一些帮助。另外如果我不能用CSS做这个，我更喜欢jQuery代码，因为我不太了解javascript。

这是div：

<div id="content"><!-- some content loaded from database with php --></div>

并且css为此：

#content {width:100%; overflow:auto; position:absolute; top:30px; left:0px;}

Answer 1

我不知道任何CSS属性，它允许隐藏滚动条。但是您可以将滚动的内容包装到另一个较小的div中并隐藏溢出的滚动条

<div id="wrapper">
    <div id="content">Lorem ipsum dolor sit ...</div>
</div>

#wrapper {
    width: 282px;
    overflow: hidden;
}
#content {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
}

这会在没有滚动条的情况下创建可滚动内容的错觉。但由于滚动条在浏览器与另一个浏览器之间存在差异，因此很可能无法移植。我只使用Firefox 25进行了测试。

请参阅JSFiddle

更新

由于您的问题已标记为javascript，因此我查看了Element.clientWidth

<强>摘要
clientWidth是元素的内部宽度（以像素为单位）。它包括填充但不包括垂直滚动条（如果存在，如果呈现），边框或边距。

因此，如果您想使用Javascript，您可以获取内容clientWidth并将其设置为包装器的宽度

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');
var cw = content.clientWidth;
wrapper.style.width = cw + 'px';

查看更新的JSFiddle

Answer 2

听起来像是一个jQuery解决方案。我发现这很快： http://jscrollpane.kelvinluck.com/

你可以主题这个插件，所以我的想法是主题它所以它没有显示哪些仍然允许你使用鼠标滚轮等滚动...但没有实际的滚动条。

Answer 3

之前的答案可能是用css做的最好的事情......

但也许这个jquery库可以帮助你......但实际上我不知道它的工作原理有多好......

https://github.com/brandonaaron/jquery-mousewheel/

Answer 4

这可能有效，也可能无效，但我认为尝试其中一项应该做你想做的事情：

overflow-y:hidden;
overflow-x:hidden;

Answer 5

div.scrollsaison::-webkit-scrollbar {
  width: 0px; 
}

div.scrollsaison {
  background-color: hsla(0, 0%, 20%, 0.51);
  border: 2px solid rgb(253, 253, 252);
  white-space: nowrap;
  width: 99.1%;
  overflow-y: visible;
}

div.scrollsaison a {
display: inline-block;
color: white;
text-align: center;
padding: 2%;
text-decoration: none;
font-weight: 900;
font-size: 2.2em;
font-family: -webkit-pictograph;
}

div.scrollsaison a:hover {
  border-radius: 10px;
  box-shadow: inset 0 0 1em hsl(19, 88%, 78%), 0 0 2em hsl(14, 85%, 63%);
}

<div class="bg">
      <div class="scrollsaison">
        <a href="#">Saison 1</a>
        <a href="#">Saison 2</a>
        <a href="#">Saison 3</a>
        <a href="#">Saison 4</a>
        <a href="#support">Saison 5</a>
        <a href="#blog">Saison 6</a>
        <a href="#tools">Saison 7</a>  
        <a href="#base">Saison 8</a>
        <a href="#custom">Saison 9</a>
        <a href="#more">Saison 10</a>
        <a href="#logo">Saison 11</a>
        <a href="#friends">Saison 12</a>
        <a href="#partners">Saison 13</a>
        <a href="#people">Saison 14</a>
        <a href="#work">Saison 15</a>
      </div>
</div>

div中的隐形滚动条

5 个答案: