1

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

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

我想通过完全删除默认滚动条来解决这个问题,然后实现一个轻量级的自定义滚动条,它透明地浮动在内容之上,而不是影响页面的宽度。我似乎无法删除窗口的滚动条,即使使用鼠标滚轮也无法滚动。这是一个 JSFiddle 示例

如您所见, usingoverflow-y: hidden隐藏滚动条但无法滚动,overflow-y: visible并使滚动条出现。是否可以隐藏窗口的滚动条而不影响窗口的可滚动性?

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


我的沉思。

我可以看到几种方法来实现这一点。

  1. 我可以使用 JavaScript 来获取 body 标签的高度,然后模拟滚动和我的自定义滚动条。不过,出于性能和跨平台兼容性的原因,我很确定我更喜欢浏览器进行本机滚动。我相当肯定这也会在移动浏览器上滑动滚动。
  2. 在较新版本的 WebKit 中,我可以使用 CSS: 隐藏滚动条body::-webkit-scrollbar { display: none; }。这是完美的,但它不会帮助 Opera 或 Firefox 用户。(拧 IE 用户。)

如您所见,这些方法都不是好方法,所以我真的需要您的意见。

4

0 回答 0