I’m having some trouble with a cursorhack I’ve been working on.
On my website, I have a “secret” page, and for reasons, I had to have an animated cursor on that page.
This animated cursor is actually a position:absolute div located within the body, powered by CSS animations. For the most part, this works. I still need to find out how to disable the cursor itself, but it works.
However, whenever I move the mouse to the right/bottom of the viewport, the page starts to extend. this is as the div is an absolute div, so as it goes to the right/bottom, the page extends to allow you to view the part of the cursor that has just left the viewport.
essentially, a position:absolute div located in the body tag is outside the viewport, which is causing issues with the scrollbars extending. naturally, this is not what I want to happen.
is there any way to stop this from happening?
edit: here is the snippet of code I am using, too. in case it helps:
$(document).mousemove(function(e){
$("#Cursor").css({left:e.pageX, top:e.pageY});
});
Edit2: for a visual reference, this is almost identical to my setup: http://jsfiddle.net/BfLAh/1/
Try to move the mouse to the bottom/right of the window, and you’ll see the issue.
Try using the
transform
property totranslate
the element into the right position â AFAIK âpositioningâ an element outside the viewport using that should not make the document measurements increase.If you see to it that your cursor element is positioned at 0/0 to begin with (like by putting
#Cursor{position:absolute;top:0;left:0;}
in your stylesheet), then I think you should be able to just take thepageX
/pageY
values as are as translate parameters, like this