Запрет прокрутки страницы, когда мышь находится над сценой в Firefox

Question

Я создаю приложение three.js, вложенное в div на веб-странице. Я использую OrbitControls.js для масштабирования с помощью колеса мыши. Однако использование колеса мыши приводит к прокрутке всей страницы. Мне нужно отключить прокрутку, когда моя мышь находится над холстом.

Я нашел решение от this question, которое должно было добавить код в OrbitControls.js. Это решение работает в Chrome и Internet Explorer, но не в Firefox (это единственные браузеры, которые я пробовал)

Любые предложения по решению, которое будет работать и с Firefox?

Пример функциональности я искал можно увидеть, рассматривая this link представленную в вопросе я, указанным выше (если вы не используете 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

Обнаружено решение после некоторого вдохновения из решения Canvas. Я был убежден, что это проблема с tr.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 2

Можете ли вы не просто прослушать событие прокрутки на конкретном div и только 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 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 

Я уже создал pull запрос на github: https://github.com/mrdoob/three.js/pull/7310