Javascript 对角滚动div

如何使div沿对角线滚动？一个普通的滚动条会向上/向下或向左/向右滚动，但我想让div向上和向右滚动或向下和向左滚动

---

编辑：根据OP的要求，我更新了示例代码，引入了一个修正系数，用于更改对角线移动方向和角度

如果你想使用jQuery，你必须下载插件

然后，您可以编写绑定到

mouseweel

事件的简单函数，例如：

HTML

<div id="block"></div>

<div id="block"></div>

<h1>Try scrolling using the scrollbars</h1>
<div id="diagonalscroller">
    <img src="http://dummyimage.com/800/" />
</div>

备选方案1：使用CSS顶部和左侧的JS

$(function(){
    $(window).on('mousewheel', function(evt,delta){
        var $block = $('#block'),
            // retrieves the top and left coordinates
            top = parseInt($block.css('top')),
            left = parseInt($block.css('left')),
            // mouse wheel delta is inverted respect to the direction, so we need to
            // normalize it against the direction
            offset = -1 * delta,
            // X and Y factors allows to change the diagonal movement direction and
            // degree. Negative values inverts the direction.
            factorX = 5,
            factorY = 2,
            // calculates the new position. NOTE: if integers only are used for factors,
            // then `Math.floor()` isn't required.
            newTop = top + Math.floor(offset * factorY),
            newLeft = left - Math.floor(offset * factorX);

        // moves the block
        $block.css({ 
            top: newTop + 'px',
            left: newLeft + 'px'
        });
    });
});

$(function(){
    $(window).on('mousewheel', function(evt,delta){
        var $block = $('#block'),
            // retrieves the top and left coordinates
            position = $block.offset(),
            // mouse wheel delta is inverted respect to the direction, so we need to
            // normalize it against the direction
            offset = -1 * delta,
            // X and Y factors allows to change the diagonal movement direction and
            // degree. Negative values inverts the direction.
            factorX = 5,
            factorY = 2,
            // calculates the new position. NOTE: if integers only are used for factors,
            // then `Math.floor()` isn't required.
            newTop = position.top + Math.floor(offset * factorY),
            newLeft = position.left - Math.floor(offset * factorX);

        // moves the block
        $block.offset({ top: newTop, left: newLeft });
    });
});

备选方案2:JS使用offset（）

现在，您可以通过向上滚动来向上和向右移动长方体，反之亦然，通过向下滚动来向上和向右移动长方体。 在本例中，在每个

mouseweel

事件上，回调函数：

检索当前元素位置（

top

和

left

CSS属性）

反转

mouseweel

事件返回的增量值，这样向上滚动得到负增量，向下滚动得到正增量

设置定义对角线移动方向和角度所需的因子值

计算新位置

移动对象

要更改程度和方向，只需更改

factorX

和/或

factorY

值，以便：

• 负值反转方向，并且
• 不同的值会更改阶数（例如，X=2和Y=5使图元相对于X=5和Y=2以更闭合的角度移动）

这是一个你可以测试的方法

备选方案3：使用cos（）和sin（）的JS

在本例中，要更改的是

角度中的值（本例中为45）。其他一切都与其他示例一样有效

最后一件事，如果需要改变运动速度，只需将
factorX
和/或
factorY
乘以所需系数（例如，1.5表示速度的一倍半，或2表示速度的两倍，等等）

有可能在一个小地方试一下


编辑

仅仅为了获得知识，你可以用电脑达到同样的目标。这允许您利用GPU加速的硬件。（更多信息请参见和的文章）

HTML

<div id="block"></div>

<div id="block"></div>

<h1>Try scrolling using the scrollbars</h1>
<div id="diagonalscroller">
    <img src="http://dummyimage.com/800/" />
</div>

JS

#block {
    position: absolute;
    width: 200px;
    height: 150px;
    top: 200px;
    left: 50px;
    background-color: red;
}

#block {
    width: 200px;
    height: 150px;
    background-color: red;
    transform: translate3d(0, 0, 0);
}

$(function(){
    var blockOffsetX = 50,
        blockOffsetY = 200;

    $('#block').css({
        transform: 'translate3d(' + blockOffsetX + 'px' + ', ' + blockOffsetY + 'px, 0)'
    });

    $(window).on('mousewheel', function(evt,delta){
        var $block = $('#block'),
            offset = -1 * delta;
            factorX = 5,
            factorY = 2;

        blockOffsetX -= offset * factorX;
        blockOffsetY += offset * factorY;
        $block.css({ 
            transform: 'translate3d(' + blockOffsetX + 'px, ' + blockOffsetY + 'px, 0)'
        });
    });
});

var lastScrollTop = 0;
$("#diagonalscroller").scroll(function(e) {
    var scrollTop = $(this).scrollTop();    
    if (scrollTop === lastScrollTop) {
        // Vertical scroll position is unchanged, so we're scrolling horizontal.
        $(this).scrollTop($(this).scrollLeft());
    } else {
        // Vertical scroll position has changed, so we're scrolling vertical.
        $(this).scrollLeft($(this).scrollTop());
    }
    lastScrollTop = scrollTop;
});

#diagonalscroller {
 width: 200px;
 height: 200px;
 overflow: scroll;
}

但是，正如您在本例中看到的，您需要跟踪元素X，Y的位置，因为直接从CSS检索这些值有点复杂。此外，这个示例更简单，但在生产中，您必须支持每个特定于供应商的CSS属性（
-webkit-
，
-moz-
，
-o-
，
-ms-
，等等）

这是一个可行的方法（如果不可行，您可能需要根据浏览器的特定前缀CSS属性编辑代码）


编辑：由于OP已经看到收听
滚动
事件对他来说是更好的选择，我添加了相关代码（这里只报告JS代码，因为HTML和CSS与第一个示例非常相同）：

这是一张工作票


奖金：创意

HTML5
data-*
属性可以用来存储元素的数据（例如：校正系数、最后位置等），而不是为每个元素使用公共局部变量，然后可以使用jQuery
.data（）
方法来检索和处理这些数据

赞成者：


将回调函数与元素解耦
自定义页面上的每个元素，使其行为彼此不同

缺点：


它可能会以某种方式影响渲染性能，尤其是回调函数是否必须同时管理多个元素
编辑：根据OP的要求，我更新了示例代码，引入了一个修正系数，用于更改对角线移动方向和角度

如果你想使用jQuery，你必须下载插件

然后，您可以编写绑定到
mouseweel
事件的简单函数，例如：

HTML

<div id="block"></div>

<div id="block"></div>

<h1>Try scrolling using the scrollbars</h1>
<div id="diagonalscroller">
    <img src="http://dummyimage.com/800/" />
</div>

备选方案1：使用CSS顶部和左侧的JS

$(function(){
    $(window).on('mousewheel', function(evt,delta){
        var $block = $('#block'),
            // retrieves the top and left coordinates
            top = parseInt($block.css('top')),
            left = parseInt($block.css('left')),
            // mouse wheel delta is inverted respect to the direction, so we need to
            // normalize it against the direction
            offset = -1 * delta,
            // X and Y factors allows to change the diagonal movement direction and
            // degree. Negative values inverts the direction.
            factorX = 5,
            factorY = 2,
            // calculates the new position. NOTE: if integers only are used for factors,
            // then `Math.floor()` isn't required.
            newTop = top + Math.floor(offset * factorY),
            newLeft = left - Math.floor(offset * factorX);

        // moves the block
        $block.css({ 
            top: newTop + 'px',
            left: newLeft + 'px'
        });
    });
});

$(function(){
    $(window).on('mousewheel', function(evt,delta){
        var $block = $('#block'),
            // retrieves the top and left coordinates
            position = $block.offset(),
            // mouse wheel delta is inverted respect to the direction, so we need to
            // normalize it against the direction
            offset = -1 * delta,
            // X and Y factors allows to change the diagonal movement direction and
            // degree. Negative values inverts the direction.
            factorX = 5,
            factorY = 2,
            // calculates the new position. NOTE: if integers only are used for factors,
            // then `Math.floor()` isn't required.
            newTop = position.top + Math.floor(offset * factorY),
            newLeft = position.left - Math.floor(offset * factorX);

        // moves the block
        $block.offset({ top: newTop, left: newLeft });
    });
});

备选方案2:JS使用offset（）

现在，您可以通过向上滚动来向上和向右移动长方体，反之亦然，通过向下滚动来向上和向右移动长方体。
在本例中，在每个
mouseweel
事件上，回调函数：

检索当前元素位置（
top
和
left
CSS属性）
反转
mouseweel
事件返回的增量值，这样向上滚动得到负增量，向下滚动得到正增量
设置定义对角线移动方向和角度所需的因子值
计算新位置
移动对象
要更改程度和方向，只需更改
factorX
和/或
factorY
值，以便：


负值反转方向，并且
不同的值会更改阶数（例如，X=2和Y=5使图元相对于X=5和Y=2以更闭合的角度移动）

这是一个你可以测试的方法

备选方案3：使用cos（）和sin（）的JS

在本例中，要更改的是
角度中的值（本例中为45）。其他一切都与其他示例一样有效

最后一件事，如果需要改变运动速度，只需将
factorX
和/或
factorY
乘以所需系数（例如，1.5表示速度的一倍半，或2表示速度的两倍，等等）

有可能在一个小地方试一下