当鼠标位于容器外时,谷歌日历如何实现滚动？

Question

正如您在下面的视频中看到的那样,当鼠标位于事件容器之外时,当鼠标向上移动时它仍然向上滚动到向上,当鼠标移动到底部时它仍然向下滚动.

我需要在下面的演示中实现相同的功能.但现在它看起来如下.你可以看到滚动是丑陋的.

请帮我.如何在我的演示日历的谷歌日历中实现滚动？

Answer 1

在 Chrome 和 Safari 中（已测试 Chrome 43.0.2357.81 和 Safari 8.0.6），“日”和“周”视图在 ID 为“scrolltimedeventswk”的 DIV 中显示事件。检查scrolltimedeventswk元素，您可以看到矩形滚动条实际上​​是本机滚动条，使用WebKit伪元素来设置本机滚动条的样式。请参阅： https: //www.webkit.org/blog/363/styling-scrollbars/

知道这一点后，更改垂直滚动位置是通过设置scrolltimedeventswk 元素的scrollTop. 要实现像 Google 日历那样的动画滚动，可以在“mousedown”上设置一个间隔，只需稍微减少/增加scrollTop直到到达顶部/底部。间隔可以通过“mouseup”清除。

以下是这种“平滑滚动”技术的示例：
http://www.sitepoint.com/scroll-smoothly-javascript/
请注意，在这篇博客文章中，作者正在开发用于单击时平滑滚动的代码，例如单击时滚动到页面顶部的链接。然而，技术是相同的。