注意:我使用的是最新版本的Chrome。
我正在开发一个利用大量JavaScript驱动的布局的Web应用程序。我遇到的主要问题是某些布局会使窗口的垂直滚动条出现(当内容溢出窗口时),这会影响布局过程中页面的宽度。我在大多数情况下通过调用布局函数两次来解决这个问题 - 第一次调用使滚动条出现,第二次调用使用正确的页面宽度。尽管如此,这仍然是最常见的头痛。
我想通过完全删除默认滚动条来修复此问题,然后实现一个轻量级自定义滚动条,该滚动条透明地浮动上面内容而不是影响页面的宽度。我似乎无法移除窗口的滚动条,即使使用鼠标滚轮也无法滚动。 Here is a JSFiddle example
正如您所看到的,使用overflow-y: hidden
会隐藏滚动条,但无法滚动,overflow-y: visible
会显示滚动条。是否可以隐藏窗口的滚动条而不影响窗口的可滚动性?
请注意:我说的是浏览器窗口的滚动条,而不是其中可滚动元素的滚动条。这两者在性能方面以及在不同浏览器和移动平台上的行为方面都有很大不同。
我可以看到实现这一目标的几种方法。
body::-webkit-scrollbar { display: none; }
。这是完美的,但它不会帮助Opera或Firefox用户。 (搞IE用户。)正如你所看到的,这两种方式都不是好方法,所以我真的需要你的意见。