Jquery – stop mouse-locked position:absolute from extending page?

0 Views

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.

Read More

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.

Post Views: 0

Related posts

1 comment

  1. Try using the transform property to translate 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 the pageX/pageY values as are as translate parameters, like this

    $("#Cursor").css({
  transform: "translate("+e.pageX+"px, "+e.pageY+"px)"
});

Comments are closed.