停止滾動時選擇將移到外面股利

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

在小提琴，我沒有與文本的問題的問題，但也許，這取決於你的瀏覽器，你需要更新用戶與那些與其他瀏覽器兼容也選擇？

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

Answer 2

您可以嘗試設置溢出隱藏。它刪除滾動條，但它可以防止您看到的問題。你甚至可以做到這一點，只有當鼠標進入/離開

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 3

基於裏海的回答，我修改它，以便而不是取消滾動條（這很糟糕）的，它記錄了當前的滾動

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觸發之前（在您離開滾動條之前它不會觸發），所以有一段時間一點滾動，但它並沒有那麼糟糕...