移除滚动条但保留滚动功能

Question

我知道您可以在HTML的body上定义overflow:hidden;来去掉滚动条，但我仍然希望能够使用鼠标的箭头或滚轮进行滚动。

谢谢您提前的帮助。

编辑： 感谢所有关于悬停滚动条和自定义滚动条的建议。同时也感谢所有担心通过去除滚动条影响用户体验的人。让我再详细解释一下我的想法。

我有一个圆形页面（如果您使用滚轮或箭头按钮向下滚动，当它到达底部时会重置到页面顶部并重新开始）。一个无限循环。滚动条对此产生影响，因为当滚动条到达底部并重置到顶部时，用户的鼠标仍然在页面底部，这意味着当他们将鼠标移动时，页面会在顶部和底部之间闪烁。

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

- Somk

---

没有鼠标滚轮的人们伤心的一天 :( - SpaceFace

@Prupel 我同意，但另一方面，现在谁还会使用没有滚轮的鼠标？ - MilkyWayJoe

笔记本电脑用户只有触摸板怎么办？这个想法的更大问题不在于用户如何使用错误的设备（或某些身体残疾），而在于任何用户如何知道该内容可以滚动？ - nnnnnn

你对保留滚动条但仅在鼠标悬停时显示该怎么看？我个人认为这是外观和功能之间的完美结合。 - Iain_b

@Iain_b #foo { overflow: hidden; } #foo:hover { overflow: auto; }, 很有趣。 - Dai

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

- Varon

---

只是好奇，为什么你需要position:relative;？我移除了它，代码仍然正常运行，有什么原因它存在吗？非常有帮助的代码，谢谢你的分享。 - www139

非常有帮助，先生。 - HiDayurie Dave

Answer 2

好的，新答案。我刚刚开发了一个小技巧，结合了jQuery来实现。

在body内创建一个包装器

，并使用以下CSS。

body { overflow: hidden; }

#wrapper { overflow: auto; }

然后，只需设置它们各自的高度：

$("body").height($(window).height());
$("#wrapper").height($("#text").height());

演示

---

支持调整大小

$(window).trigger('scroll');

$(window).scroll(function() {
    $("body").height($(window).height());
    $("#wrapper").height($("#text").height());    
});

演示

- Starx

---

我需要将页面的主体定义为大约4000像素，但同时移除滚动条。 - Somk

这对我没有作用，而且完全没有意义。 - Sotiris

这对我不起作用 - 键盘或滚轮没有任何反应（在单击主体以确保它具有焦点后）。将其更改为overflow:scroll;，它就可以工作了，但是滚动条会出现。 - nnnnnn

@nnnnnn，我有点误解了问题，之前的解决方案只适用于固定大小。无论如何，请查看新答案。 - Starx

谢谢您的时间，但是这不支持笔记本电脑上的上下按钮或触摸板。 - Somk

@Max，很有趣，我正在使用笔记本电脑构建那个小提琴。 - Starx

Answer 3

你可以尝试使用jQuery滚动条插件之一，它们允许自定义CSS设计...

你可以选择将滚动条设计为不可见的，但鼠标功能仍然存在...

我个人最喜欢的是malihu's，只需确保使用它的鼠标滚轮扩展。

编辑：

也许在你查看自定义设计的滚动条后，你可以重新考虑显示滚动条。毕竟，它们是有用和指导性的。

- Rodik

---

我还没有看到一个JS的“自定义滚动”解决方案是不可怕的（抖动，滚动缓慢等）。为什么要重复造轮子呢？ - cimmanon

你可能还没有看到这个特定的插件，其次，它完美地适用于提问者的情况。 - Rodik

我不认为这应该被踩。正如我上面所说，我认为滚动条应该在悬停时显示，但一旦它们出现，我认为建议的插件是一个不错的选择。 - Iain_b

让我们同意称之为我的想法的缺点，以及它对于这样平凡的任务过于复杂，还有它是另一个依赖项。 - Rodik

虽然这已经很老了，但我想指出一个 JS 库用于滚动，在我的经验中实际上非常出色，并且对于其他用例（如移动设备的更好滚动）也非常有用：FTScroller。 - gdgr