jQuery:如何用鼠标垂直滚动

时间:2011-12-27 13:31:20

标签: jquery scroll

我有一个工作脚本,允许我在一个元素内滚动,同时按下鼠标并将其向左或向右移动。

我想添加垂直滚动。如果我向右或向左移动鼠标,我会在水平方向内滚动,如果我将鼠标移动到顶部或底部,它将垂直滚动。

$(function () {
$('#myDiv').mousedown(function (event) {
    $(this)
      .data('down', true)
      .data('x', event.clientX)
      .data('scrollLeft', this.scrollLeft);
    return false;
}).mouseup(function (event) {
    $(this).data('down', false);
}).mousemove(function (event) {
    if ($(this).data('down') == true) {
        this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
}).css({
    'overflow': 'hidden',
    'cursor': '-moz-grab'
   });
});
$(window).mouseout(function (event) {
    if ($('#myDiv').data('down')) {
        try {
            if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                $('#myDiv').data('down', false);
            }
        } catch (e) { }
    }
});

原始来源:http://jqueryfordesigners.com/fun-with-overflows/

我尝试添加

.data('y', event.clientY)
.data('scrollTop', this.scrollTop);
...
this.scrollTop = $(this).data('scrollTop') + $(this).data('y') - event.clientY;

但它不适合我。

1 个答案:

答案 0 :(得分:0)

找到jquery的这个插件:https://github.com/iwyg/jquery.dragscroll 使用该插件,可以使用鼠标滚动水平和垂直。 在此处找到示例:http://dev.thomas-appel.com/dragscroll/example/

很棒的想法,但我发现了一些错误。希望,插件会更新。