Question

我有一个div，我想通过鼠标滚轮/滚动条滚动，点击并拖动，所以我添加了一个鼠标监听器来处理它：

container
  .mousedown(function() {
  container.css({
    'cursor': 'move',
    "user-select": "none" //disable selecting text
  });
  container.on('mousemove', function(e) {
    if(lastE) {
      container.scrollLeft(container.scrollLeft() - (e.pageX-lastE.pageX));
      container.scrollTop(container.scrollTop() - (e.pageY-lastE.pageY));
    }
    lastE=e;
  })
})
  .mouseup(function() {
  container.off('mousemove');
  container.css({
    'cursor': 'auto',
    "user-select": "default"
  });
  lastE=undefined;
});

然而，当你拖动并且你将鼠标移出div时，浏览器就像你正在选择文本一样，并且“帮助”开始滚动另一种方式以允许你选择更多，即使我禁用了文本选择，我找不到办法让它停下来。

https://jsfiddle.net/vej2fkdf/

Answer 1

您可以尝试将溢出设置为隐藏。它删除了滚动条，但它可以防止你看到的问题。您甚至可以在鼠标进入/离开

时执行此操作

var lastE; //last event, used for comparing mouse position
var container = $('#container');
var out = false;

container
  .mousedown(function() {
  container.css({
    'cursor': 'move',
    "user-select": "none" //disable selecting text
  });
  container.on('mousemove', function(e) {
    if(lastE) {
      container.scrollLeft(container.scrollLeft() - (e.pageX-lastE.pageX));
      container.scrollTop(container.scrollTop() - (e.pageY-lastE.pageY));
    }
    lastE=e;
  });
  container.mouseleave(function () {
    container.css({
      'cursor': 'move',
      'overflow':'hidden',
      "user-select": "none" //disable selecting text
    });
  });
  container.mouseenter(function () {
    container.css({
      'cursor': 'move',
      'overflow':'scroll',
      "user-select": "none" //disable selecting text
    });
  });
})

$(document).mouseup(function() {
  container.off('mousemove');
  container.off('mouseleave');
  container.off('mouseenter');
  container.css({
    'cursor': 'auto',
    "user-select": "default",
    "overflow": "scroll"
  });
  lastE=undefined;
});

https://jsfiddle.net/vej2fkdf/4/

Answer 2

根据caspian的回答，我对其进行了修改，以便不会删除滚动条（看起来很糟糕），而是记录当前滚动位置，然后重复重置滚动位置，直到鼠标重新进入div或释放鼠标为止： / p>

var mouseLeftX;
var mouseLeftY;

container
  .mousedown(function() {
    container.css({
      'cursor': 'move',
      "user-select": "none" //disable selecting text
    });
    container.on('mousemove', function(e) {
      if(lastE) {
        container.scrollLeft(container.scrollLeft() - (e.pageX-lastE.pageX));
        container.scrollTop(container.scrollTop() - (e.pageY-lastE.pageY));
      }
      lastE=e;
    });
    container.mouseleave(function () {
      mouseLeftX = container.scrollLeft();
      mouseLeftY = container.scrollTop();
      container.scroll(function() {
       if(lastE) {
          container.scrollLeft(mouseLeftX);
          container.scrollTop(mouseLeftY);
        }
      })
    });
    container.mouseenter(function () {
        container.off('scroll');
      container.css({
        'cursor': 'move',
        "user-select": "none" //disable selecting text
      });
    });
  })

$(document).mouseup(function() {
  container.off('mousemove');
  container.off('mouseleave');
  container.off('mouseenter');
  container.off('scroll');
  container.css({
    'cursor': 'auto',
    "user-select": "default",
  });
  lastE=undefined;
});

https://jsfiddle.net/vej2fkdf/5/

仍然不完美，因为有一段时间用户将鼠标悬停在滚动条上，浏览器拖动选择正在进行但是在mouseleave触发之前（直到你离开滚动条才会触发），所以有有点滚动，但它并没有那么糟糕......

Answer 3

在小提琴中，我没有遇到文字问题，但也许，根据您的浏览器，您还需要更新用户选择与其他浏览器兼容的用户吗？

merge-file

当选择移到Div之外时停止滚动

3 个答案: