javascript - 删除滚动条但不删除滚动功能

Question

<分区>

Answer 1

有一个名为 jscrollpane 的 jQuery 库 http://jscrollpane.kelvinluck.com/#examples可以修改很多。

但是如果你只想隐藏滚动条，你也可以把这个滚动条推到看不见的地方:http://jsfiddle.net/H27BK/

<div id="content">
    <div id="scrollable"> ... ... ... </div>
</div>

使用 CSS

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 218px; /* #content.width + 18px */
   overflow-y: scroll;    
}

这一切都基于 18 像素的条形宽度。

---

所以我们可以做一些 javascript 滚动条宽度检测脚本，或者简单地添加另一个我们放在可滚动 div 前面的 div。

http://jsfiddle.net/uNzEz/

HTML 现在是:

<div id="content">
<div id="scrollable">
<div id="txt"> ... ... ...
</div></div></div>

像这样的 CSS:

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 240px; /* the bar-width can be theoretical 240px - 200px = 40px */
   overflow-y: scroll;    
}
#txt {
    width: 200px;
}