是否可以隐藏浏览器窗口的滚动条而不影响页面的可滚动性?

时间:2013-02-27 20:58:05

标签: javascript html css scroll

注意:我使用的是最新版本的Chrome。

我正在开发一个利用大量JavaScript驱动的布局的Web应用程序。我遇到的主要问题是某些布局会使窗口的垂直滚动条出现(当内容溢出窗口时),这会影响布局过程中页面的宽度。我在大多数情况下通过调用布局函数两次来解决这个问题 - 第一次调用使滚动条出现,第二次调用使用正确的页面宽度。尽管如此,这仍然是最常见的头痛。

我想通过完全删除默认滚动条来修复此问题,然后实现一个轻量级自定义滚动条,该滚动条透明地浮动上面内容而不是影响页面的宽度。我似乎无法移除窗口的滚动条,即使使用鼠标滚轮也无法滚动。 Here is a JSFiddle example

正如您所看到的,使用overflow-y: hidden会隐藏滚动条,但无法滚动,overflow-y: visible会显示滚动条。是否可以隐藏窗口的滚动条而不影响窗口的可滚动性?

请注意:我说的是浏览器窗口的滚动条,而不是其中可滚动元素的滚动条。这两者在性能方面以及在不同浏览器和移动平台上的行为方面都有很大不同。


我的想法。

我可以看到实现这一目标的几种方法。

  1. 我可以使用JavaScript来获取body标签的高度,然后模拟滚动和我的自定义滚动条。我非常确定我更喜欢浏览器进行原生滚动,无论是出于性能还是跨平台兼容性原因。我相当肯定这也会在移动浏览器上滑动滚动。
  2. 在较新版本的WebKit中,我可以使用CSS隐藏滚动条:body::-webkit-scrollbar { display: none; }。这是完美的,但它不会帮助Opera或Firefox用户。 (搞IE用户。)
  3. 正如你所看到的,这两种方式都不是好方法,所以我真的需要你的意见。

0 个答案:

没有答案