使用jQuery隐藏div滚动条,但保留滚动?

我试图能够在一个div内滚动,但没有显示实际的滚动条。

我需要用户能够使用滚轮滚动

有没有人有关于如何实现这一目标的想法?

谢谢!

那么,真正的原因就是为什么你会这么想,但是既然你问我会尝试解决你的问题。

你需要两个div。 一个嵌套在另一个里面。

Scrolling Content Goes here.

然后,您将需要一些CSS来帮助解决这种情况。 溢出:auto会在超过高度限制时为您提供滚动。 为了这个例子我放了一个随机宽度。 在右侧推一个填充物,将滚动条推出.outer div类。 这样您就不必担心.outer div下的内容了。

 .inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; } 

对于外部类,您需要指定相同的高度,相同的宽度,但溢出:隐藏。

 .outside { width: 500px; height: 300px; overflow: hidden; } 

示例: jsFiddle

也许你可以使用CSS并隐藏或做一些样式,所以它看起来隐藏。 这是我发现的一些链接。

http://css-tricks.com/custom-scrollbars-in-webkit/

http://www.yourhtmlsource.com/stylesheets/scrollbars.html

这在IE和Firefox中进行了测试 – 两者处理填充的方式略有不同,因此我使用高度和宽度来考虑内容可见性。

有两个容器是有意义的 – 一个用于容器,一个用于内容,但是由于浏览器处理填充的方式不同,所以将滚动条推入隐藏区域要比想象的要困难得多。 这是第三个容器进来的地方:

  • 没有滚动条的父级维度的一个容器
  • 一个包含滚动条的容器,该滚动条被推入隐藏区域
  • 一个容器,容纳具有正确宽度设置的内容

这是通过样式表技巧完成的 – 样式表已被注释,因此您可以按照其中的说明/注释进行操作。

希望这可以帮助! 🙂

      

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.

Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.