在Firefox中鼠标悬停时防止页面滚动

Question

我正在创建一个嵌套在网页上div中的three.js应用程序。 我正在使用OrbitControls.js允许通过鼠标滚轮进行缩放。 但是，使用鼠标滚轮会导致整个页面滚动。 当鼠标悬停在画布上时，我需要禁用滚动。

我从这个问题中找到了一个解决方案， 该解决方案是向OrbitControls.js添加一些代码。 此解决方案只能在Chrome和Internet Explorer中使用，而不能在Firefox中使用（那些是我尝试过的唯一浏览器）

对适用于Firefox的解决方案有何建议？

通过查看我上面提到的问题中提供的此链接可以看到我正在寻找的功能的示例（除非您使用的是Firefox）

JavaScript的：

var container = document.getElementById("container");
container.appendChild(renderer.domElement);

controls = new THREE.OrbitControls(camera, renderer.domElement);

HTML：

<div id="container"></div>

Answer 1

您不仅可以听特定div上的滚动事件，还可以只滚动scrollTop 0; scrollLeft 0;吗scrollTop 0; scrollLeft 0; scrollTop 0; scrollLeft 0; ？

这是jsFiddle版本

jsFiddle： https ://jsfiddle.net/qLh22das/

HTML

<div id="scroller">
    <p>TEXT 1</p>
    <p>TEXT 2</p>
    <p>TEXT 3</p>
    <p>TEXT 4</p>
</div>
<br />
<br />
<br />
<div id="scroller2">
    <p>TEXT 1</p>
    <p>TEXT 2</p>
    <p>TEXT 3</p>
    <p>TEXT 4</p>
</div>

CSS

#scroller {
    height:100px;
    overflow-y: auto;
}

#scroller2 {
    height:100px;
    overflow-y: auto;
}

使用Javascript

var div1 = document.getElementById('scroller');

div1.onscroll = function(event)
{
    div1.scrollTop = 0;
    div1.scrollLeft = 0;
};

Answer 2

在从Canvas的解决方案中获得启发后，找到了一个解决方案。 我坚信这是three.js / OrbitControls.js的问题，我不认为只是尝试正常的Javascript事件。

var container = document.getElementById('container');
var active = false; //is the mouse over the div
var scrollPosition = 0;
container.onmouseenter = function(e) {
    active = true;
    scrollPosition = document.documentElement.scrollTop;
};

container.onmouseleave = function(e) {
    active = false;
};

window.onscroll = function(e)
{
    if (active) {
        window.scrollTo(0,scrollPosition);
    }
};

Answer 3

我在当前项目中遇到了相同的问题，并通过更改OrbitControls.js中的以下行来解决此问题：

# Line 781
this.domElement.removeEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox

# Line 798
this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox

至

# Line 781
this.domElement.removeEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox

# Line 798
this.domElement.addEventListener( 'MozMousePixelScroll', onMouseWheel, false ); // firefox

我已经在github上创建了一个拉取请求： https : //github.com/mrdoob/three.js/pull/7310