javascript - div中的隐形滚动条

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中并 overflow hidden 的滚动条

<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

Summary
clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

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

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

查看更新 JSFiddle