javascript - Stop Scrolling When Selection Moves Outside Div

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/