Javascript 隐藏滚动条并像 facebook 的新聊天侧边栏一样悬停显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7125185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide scrollbar and show on hover like facebook's new chat sidebar
提问by Achshar
Facebook just updated chat (yet again) and now a new fixed side bar stays on the left of the screen. when its contents overflow, a scroll bar appears, but only if scrolled with the mouse wheel or if mouse moves over (or near) the scroll bar. It fades out if the mouse is not over it. it is very useful for thing windowed objects (such as the chat itself). So how does it work?
Facebook 刚刚更新了聊天（又一次），现在一个新的固定侧栏留在屏幕左侧。当其内容溢出时，会出现滚动条，但前提是使用鼠标滚轮滚动或鼠标移动到（或靠近）滚动条。如果鼠标不在它上面，它就会淡出。它对于事物窗口对象（例如聊天本身）非常有用。那么它是怎样工作的？
PS i am looking for a pure html5/css/javascript solution (no jquery or such), no browser support necessary, should work in latest chrome and nothing more, since i am making an app for chrome only.
PS 我正在寻找一个纯 html5/css/javascript 解决方案（没有 jquery 之类的），不需要浏览器支持，应该可以在最新的 chrome 中工作，仅此而已，因为我正在为 chrome 制作一个应用程序。
回答by Michael G.
Here is an update to Stephen P.'s post to have a styled scroll bar.
这是 Stephen P. 帖子的更新，它具有样式化的滚动条。
http://jsfiddle.net/PVZB8/139/
http://jsfiddle.net/PVZB8/139/
-Mike
-麦克风
回答by Stephen P
You set the overflow to nonenormally and change it to have overflow-y: scrollon hover.
您将溢出设置为none正常并将其更改为overflow-y: scroll悬停。
回答by iblue
This might not be the exact answer to the question, because it is asked for a solution without jQuery. But I came here via a search engine and I am using jQuery. If you want a solution that feels as smooth as and looks exactly like in facebook, take a look at this:
这可能不是问题的确切答案，因为它需要一个没有 jQuery 的解决方案。但我是通过搜索引擎来到这里的，我使用的是 jQuery。如果你想要一个感觉和facebook一样流畅并且看起来完全一样的解决方案，看看这个：
回答by ip.
You might also want to check out nano scroller.
您可能还想查看nano scroller。
回答by Kevin Jin
I would like to revive this thread for the benefit of future visitors and essentially sum up the other answers to this thread. I prefer jsFancyScroll(thanks Leo Selig!) as well as nanoScrollerJS(thanks ip!) because they both "retain the natural scrolling experience provided by the OS." Just try searching for a selection of text and then looking at the location of the scrollbar in the various implementations to see what I mean.
为了将来的访问者的利益，我想恢复这个线程，并基本上总结这个线程的其他答案。我更喜欢jsFancyScroll（感谢Leo Selig！）以及nanoScrollerJS（感谢ip！），因为它们都“保留了操作系统提供的自然滚动体验”。只需尝试搜索选定的文本，然后查看各种实现中滚动条的位置即可了解我的意思。
If you don't care for styling the scrollbar and just want it to auto-hide, Stephen P's answer looks to be the most elegant and best supported.
如果您不关心滚动条的样式，而只想让它自动隐藏，那么Stephen P的答案看起来是最优雅和最受支持的。
