Javascript 用鼠标移动滚动

下面是一个演示：

---

---

我希望能够使用鼠标滚动div。它工作得很好，虽然文本有点奇怪，因为您可能会意外地选择内容，但是当您将鼠标移到test

div

之外时，它会出现一个问题。即使我正在设置

down=false

，它仍会继续滚动。我如何才能阻止这种情况，以及为什么会发生这种情况？

这在Chrome中对我有效：

这在Chrome中对我有效：

看起来问题实际上是由于选择了文本造成的。如果您添加了不可选择的文本css规则，并使用原始javascript，它可以（我相信）根据您的需要使用滚动条工作。在FF 3.6中测试，问题似乎是由于所选文本引起的。如果您添加了不可选择的文本css规则，并使用原始javascript，它可以（我相信）根据您的需要使用滚动条工作。在FF 3.6中测试，“使用鼠标滚动div”是什么意思？无论是否单击鼠标，当我移动鼠标时，我实际上没有看到任何不同的情况发生。单击div并按住鼠标，然后水平移动。下面可能是一个更清晰的示例，说明所需的效果：@Radu，如果您想要这种效果，然后移除scrollbar.BTW，如果您不想选择文本：通过“使用鼠标滚动div”是什么意思？当我移动鼠标时，无论是否单击鼠标，我实际上看不到任何变化。单击div并按住鼠标，然后水平移动它。这里可能有一个更清晰的例子来说明想要的效果：@Radu，如果你想要这种效果，那么就删除滚动条。顺便说一句，如果你不想让文本可以选择：通过Neal建议的相同方法，它可以工作，但如果可能的话，我想保留滚动条。Neal建议使用一个div来做滚动条正在做的事情，但是最好避免这样做。隐藏滚动条解决了这个问题。不过，这里有一个滚动条就好了。。。（要有一个隐藏文本所在的指示器）@Radu就像我对你的问题发表的评论一样，我发现显示滚动条和启用触摸屏式滚动非常混乱。我理解这一点，我可能不得不解决。我正在为一个基因组浏览器实现这一点，所以我认为滚动条很有用，因为它能让你感觉到你在染色体上的位置。触摸屏滚动的目的是让它感觉更“触感”，并且通常更容易访问，因为您的鼠标将参与导航分区中的其他类型的交互。不确定这是否会改变您从样式角度使用滚动条的看法，但值得一想。Neal也提出了同样的建议，但效果不错如果可能的话，我想保留滚动条。Neal建议使用一个div来做滚动条正在做的事情，但是最好避免这样做。隐藏滚动条解决了这个问题。不过，这里有一个滚动条就好了。。。（要有一个隐藏文本所在的指示器）@Radu就像我对你的问题发表的评论一样，我发现显示滚动条和启用触摸屏式滚动非常混乱。我理解这一点，我可能不得不解决。我正在为一个基因组浏览器实现这一点，所以我认为滚动条很有用，因为它能让你感觉到你在染色体上的位置。触摸屏滚动的目的是让它感觉更“有触觉”，并且通常更容易访问，因为您的鼠标将参与导航部分的其他类型的交互。不确定这是否会改变您对使用滚动条的看法，但值得一想。Chrome做了一些奇怪的事情，即使没有任何脚本，当单击并拖动到元素的左侧或右侧时，东西也会左右滚动。这似乎是Chrome的默认行为……也许它可以被禁用，或者它与您的实际项目无关（只是textareas？）是的，Chrome似乎是罪魁祸首。即使在Chrome中，滚动也会在div外的mouseup上停止，但如果我尝试在mouseleve上触发mouseup，则不会发生任何变化。Chrome正在做一些奇怪的事情，即使没有任何脚本，当单击并拖动到元素的左侧或右侧时，它也会左右滚动。这似乎是Chrome的默认行为……也许它可以被禁用，或者它与您的实际项目无关（只是textareas？）是的，Chrome似乎是罪魁祸首。即使在Chrome中，滚动也会在div外的mouseup上停止，但如果我尝试在mouseup上触发mouseup，则不会发生任何变化。

var down=false;
var scrollLeft=0;
var x=0;

$('#test').mousedown(function(e) {
    down = true;
    scrollLeft = this.scrollLeft;
    x = e.clientX;
}).mouseup(function() {
    down = false;
}).mousemove(function(e) {
    if (down) {
       this.scrollLeft = scrollLeft + x - e.clientX;
    }
}).mouseleave(function() {
    down = false;
});