删除滚动条，但不删除滚动功能

小编典典

删除滚动条，但不删除滚动功能

css

我知道您可以定义overflow：hidden; 在HTML主体上删除滚动条，但我仍然希望能够使用鼠标上的箭头或滚轮滚动。

在此先感谢您的帮助。

编辑：感谢您对悬停滚动条和自定义栏上的所有建议。另外，感谢您担心通过删除滚动条来影响用户体验。我会详细说明，以便您解释我的来历。

我有一个圆形页面（如果您使用滚轮或箭头按钮滚动，当到达底部时，它将重置为页面顶部并重新开始）。永无止境的循环。滚动条会受到影响，因为条受到限制，并且当滚动条到达底部并重置到顶部时，用户鼠标仍位于页面底部，这意味着当他们移动鼠标时，页面的顶部和底部之间会有一些闪烁。

我计划删除滚动条，并用窗口顶部和底部的箭头按钮替换它。这就是为什么我想完全删除滚动条但保留滚动功能的原因。

阅读 339

2020-05-16

共1个答案

小编典典

有一个名为jscrollpane的jQuery库，它可以进行很多修改。

但是，如果您只想隐藏该栏，则也可以将该滚动条从视图中移出

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

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

2020-05-16