Question

正如您在以下video中看到的那样，当鼠标位于事件容器之外时，当鼠标上移时它仍然向上滚动到向上，当鼠标移动到底时它仍然向下滚动。

我需要在以下demo中实现相同的目标。但现在它看起来像following。你可以看到滚动是丑陋的。

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

Answer 1

在Chrome和Safari（测试过的Chrome 43.0.2357.81和Safari 8.0.6）中，日视图和周视图都在ID为＃＆gt; #time; scrolltimedeventswk＆＃34;的DIV中显示事件。检查scrolltimedeventswk元素，您可以看到矩形滚动条实际上是本机滚动条，使用WebKit伪元素进行大量样式设置原生滚动条样式。请参阅：https://www.webkit.org/blog/363/styling-scrollbars/

知道这一点，通过设置scrolltimedeventswk元素scrollTop来完成更改垂直滚动位置。要实现像Google日历这样的动画滚动，可以设置一个间隔“mousedown＆＃39;只需将scrollTop减少/增加一小部分直到达到顶部/底部。可以在＆＃39; mouseup＆＃39;上清除间隔。

这是一个例子＆＃34;平滑滚动＆＃34;技术：
http://www.sitepoint.com/scroll-smoothly-javascript/
请注意，在这篇博客文章中，作者正在开发代码，以便在点击时滚动滚动，例如在点击时滚动到页面顶部的链接。然而，这种技术是一样的。

Answer 2

花了我大约20分钟来了解你想要的东西。使用Javascript实现了这种效果，据我所知，CSS无法做到这一点。

基本上，编写代码是为了跟踪鼠标拖动，而不仅仅是单击（读取：mouseup和mousedown）。区别在于拖动时mousedown和mouseup之间有一个鼠标移动，但不是单击。

查看此代码（来自SO的另一个可靠答案）

var flag = 0;
var element = xxxx;
element.addEventListener("mousedown", function(){
    flag = 0;
}, false);
element.addEventListener("mousemove", function(){
    flag = 1;
}, false);
element.addEventListener("mouseup", function(){
    if(flag === 0){
        console.log("click");
    }
    else if(flag === 1){
        console.log("drag");
    }
}, false);

在这种事件跟踪中，您可以在拖动处于活动状态时沿鼠标方向移动/动画事件div。当拖动结束（mousedown）时，您将放置/放置最接近其最后已知位置的事件div。

在这种设置中，当鼠标也离开容器区域时，当您松开鼠标时，元素不会停止或突然移出。需要注意的重要一点是，拖动事件正在侦听整个窗口，当您离开日历容器时它不会结束。它会侦听整个窗口，但只有在mousedown的目标可拖动时才会触发。

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

2 个答案: