可滚动但无滚动条。

Question

如何让DOM对象（例如div）能够通过鼠标滚轮或箭头键（类似于overflow:scroll）进行滚动，但不显示滚动条（类似于overflow:hidden）？

- sawa

---

我不知道 - 我会点赞来弥补 ;) - Matt Fellows

Answer 1

您可以将事件监听器绑定到滚轮事件（通过鼠标滚轮事件，查看event.wheelDelta以计算滚动的大小和方向），并在另一个固定高度的绝对/相对定位的div中手动定位一个绝对定位的div。因此，在向下滚动时，您会减小内部div的y位置，在向上滚动时，您会增加y位置。

对于箭头键，只需将类似的函数绑定到按键按下事件，根据需要检查向下/向上箭头。

我在这里制作了一个jsfiddle，演示了这种技术： http://jsfiddle.net/wsmithrill/U7ju8/32/

- Matt Fellows

Answer 2

如果你想完全跳过javascript，可以尝试我在这里提出的建议。基本上，有一个容器div，它比内容div略窄。将容器设置为overflow:hidden，但将内容div设置为overflow:scroll。如果容器更窄，则会隐藏滚动条。

- chipcullen

---

很高兴你喜欢它！不幸的是，从可用性角度来看，它非常糟糕 - 用户怎么知道还有更多内容在页面之外呢？ - chipcullen

你的想法可能很简单，但我对手动调整滚动条宽度的想法有所担忧，而仅仅隐藏某些东西并不看起来很干净。 - sawa

这将是一个问题，因为滚动条取决于操作系统，所以您需要考虑支持最宽的滚动条。例如，大多数Linux的GTK主题会为Firefox带来自己的滚动条，所以...明智地使用它。 - kumarharsh

Answer 3

如果需要在到达顶部时停止向下滚动：

var top_val = $("#inner").css("top");
if (top_val.indexOf("-") > -1)
{
    $("#inner").css("top", parseInt($("#inner").css("top"), 10) + 5 + "px");  
} 

- user3555376