Javascript 当窗口碰到边界时，使用transform停止div的移动

我使用css转换制作了一个查看器，我现在想知道的是，当div的边框碰到窗口边框时，我可以阻止它移动吗？还是应该放弃转换方法

这是密码

---

您可以尝试创建一些边界，并在超出这些边界时将变换设置为这些边界：

function moveContent(){
    x += maxspeed * rateX;
    y += maxspeed * rateY;

    // top and left boundaries
    x = x > 0 ? 0: x;
    y = y > 0 ? 0: y;

    // create my bottom and right boundaries
    var x_bound = -$('.content').width() + $(window).width();
    var y_bound = -$('.content').height()+ $(window).height();
    x = (x < x_bound) ? x_bound : x;
    y = (y < y_bound) ? y_bound : y;

    var newpos = 'translate('+x+'px, '+y+'px)',
    transform = '-webkit-transform' || '-moz-transform' || '-ms-transform' ||  '-o-transform'  || 'transform',
        content = $('.content');
    content.css(transform ,newpos);
}

函数moveContent（）{
x+=最大速度*速率x；
y+=最大速度*速率y；
//顶部和左侧边界
x=x>0？0:x；
y=y>0？0:y；
//创建我的底部和右侧边界
var x_bound=-$（'.content'）.width（）+$（window.width（）；
var y_bound=-$（'.content'）.height（）+$（window.height（）；
x=（x

这是最新消息

注意：在小提琴中，我使用了

1500

而不是

$（'.content'）.width（）

，因为该div的宽度并不代表组合框的宽度

function moveContent(){
    x += maxspeed * rateX;
    y += maxspeed * rateY;

    // top and left boundaries
    x = x > 0 ? 0: x;
    y = y > 0 ? 0: y;

    // create my bottom and right boundaries
    var x_bound = -$('.content').width() + $(window).width();
    var y_bound = -$('.content').height()+ $(window).height();
    x = (x < x_bound) ? x_bound : x;
    y = (y < y_bound) ? y_bound : y;

    var newpos = 'translate('+x+'px, '+y+'px)',
    transform = '-webkit-transform' || '-moz-transform' || '-ms-transform' ||  '-o-transform'  || 'transform',
        content = $('.content');
    content.css(transform ,newpos);
}