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

我有一个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时，浏览器的行为就像您正在选择文本，“有益”开始以另一种方式滚动以允许您选择更多内容，即使我禁用了文本选择，并且找不到方法使其停止

---

在fiddle中，我没有遇到文本问题，但根据您的浏览器，您可能还需要使用与其他浏览器兼容的浏览器更新用户选择

-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
user-select: none; 

---

您可以尝试将溢出设置为隐藏。它删除了滚动条，但确实阻止了您看到的问题。您甚至只能在鼠标进入/离开时执行此操作

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;
});

---

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

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;
});

---

仍然不是完美的，因为有一段时间用户在滚动条上滑动鼠标，浏览器拖动到选择的位置，但在mouseleave启动之前（在离开滚动条之前它不会启动），所以有一点滚动，但没有那么糟糕…

我已经验证CSS正在生效，在我的实际代码中，div中有文本，我无法选择它