Facebook刚刚更新了聊天功能(再次),现在一个新的固定侧边栏停留在屏幕左侧。当其内容溢出时,会出现滚动条,但只有当使用鼠标滚轮或鼠标移动到(或靠近)滚动条时才会出现。如果鼠标不在其上方,则会淡出。它对于窗口化对象(例如聊天本身)非常有用。那么它是如何工作的?
PS:我正在寻找纯HTML5 / CSS / JavaScript解决方案(没有jQuery或类似工具),无需浏览器支持,应该可以在最新的Chrome中运行而不需要其他任何东西,因为我正在制作仅限Chrome的应用程序。
Facebook刚刚更新了聊天功能(再次),现在一个新的固定侧边栏停留在屏幕左侧。当其内容溢出时,会出现滚动条,但只有当使用鼠标滚轮或鼠标移动到(或靠近)滚动条时才会出现。如果鼠标不在其上方,则会淡出。它对于窗口化对象(例如聊天本身)非常有用。那么它是如何工作的?
PS:我正在寻找纯HTML5 / CSS / JavaScript解决方案(没有jQuery或类似工具),无需浏览器支持,应该可以在最新的Chrome中运行而不需要其他任何东西,因为我正在制作仅限Chrome的应用程序。
通常将溢出设置为none
,当鼠标悬停时将其更改为overflow-y:scroll
。
:hover
——你要么触摸要么不触摸。如果有一天,触摸屏幕检测到你接近但没有触摸,并因此支持悬停,那么它可能会起作用。然而,OP的问题特别涉及鼠标,而不是移动设备:“如果鼠标移动到(或靠近)滚动条”。 - Stephen Poverflow: none
会阻止移动设备上的滚动功能。 - Wex这可能不是完全符合问题的答案,因为它要求没有使用jQuery的解决方案。但我通过搜索引擎来到这里,并且我正在使用jQuery。如果你想要一个和Facebook一样顺滑并且外观几乎相同的解决方案,请查看这个: