How does google calendar make possible scrolling when mouse is outside of the container?

Question

As you can see in the following video when mouse is outside of the events container it still scrolled out to up when mouse goes up and bottom when mouse goes bottom.

I need to achieve the same in the following demo. But now it looks like the following. As you can see the scrolling is ugly.

Please help me. How could I achieve the scrolling like in the google calendar for my demo calendar?

Answer 1

In both Chrome and Safari (tested Chrome 43.0.2357.81 and Safari 8.0.6), the Day and Week views display events in a DIV with id "scrolltimedeventswk". Inspecting the scrolltimedeventswk element you can see that the rectangular scrollbar is actually the native scrollbar, heavily styled using the WebKit pseudo-elements for styling native scrollbars. See: https://www.webkit.org/blog/363/styling-scrollbars/

Knowing this, changing the vertical scroll position is accomplished by setting the scrolltimedeventswk element's scrollTop. To implement an animated scroll like Google Calendar's, an interval can be set on 'mousedown' that simply decreases/increases the scrollTop by a small amount until reaching the top/bottom. The interval can be cleared on 'mouseup'.

Here is an example of this "smooth scroll" technique:
http://www.sitepoint.com/scroll-smoothly-javascript/
Note that in this blog article, the author is developing code for a smooth scroll on click, such as a link that scrolls to the top of the page on click. The technique, however, is the same.

Answer 2

Took me about 20 minutes to understand what you wanted. That effect is achieved using Javascript, to the best of my knowledge CSS can't do this.

Essentially, the code is written to track mouse dragging, not just clicking (read: mouseup and mousedown). The difference is that there is a mousemove between mousedown and mouseup in a drag, but not in a click.

Look at this code (from another solid answer on 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);

In this kind of event tracking, you would move/animate the event div in the direction of the mouse while the drag is active. When the drag ends (mousedown) you would drop/place the event div closest to it's last known position.

In this kind of setup, when your mouse leaves the container area also, the element doesn't stop or snap out of it when you let go of the mouse click. What's important to note is that the drag event is listening on the entire window, it doesn't end when you leave the calendar container. It listens on the entire window, but only fires if the target for mousedown is draggable.