Stop the page from scrolling when the mouse hovers over the scene in Firefox

Question

Stop the page from scrolling when the mouse hovers over the scene in Firefox

I have a three.js application embedded within a div on a webpage. The issue I am facing is that when using the OrbitControls.js for zooming with the mouse wheel, it also scrolls the entire page. To overcome this, I need to prevent scrolling when the mouse is over the canvas.

After researching, I discovered a workaround in this post which involved modifying some code in OrbitControls.js. While this solution was effective in Chrome and Internet Explorer, it did not work in Firefox (the only browsers I tested).

Do you have any suggestions for a workaround that would be compatible with Firefox as well?

You can see an example of the desired functionality by visiting this provided link mentioned in the question above (excluding Firefox users).

JavaScript:

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

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

HTML:

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

javascript firefox three.js

Answer 1

Answer №1

Is it possible to simply listen for a scroll event on the specific div and then use scrollTop 0; scrollLeft 0;?

Check out this jsFiddle version

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

Is it possible to simply listen for a scroll event on the specific div and then use scrollTop 0; scrollLeft 0;?

Check out this jsFiddle version

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

Answer №2

Encountering a similar issue in my latest project, I was able to resolve it by making adjustments to the lines within OrbitControls.js:

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

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

This was updated to:

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

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

A pull request has been submitted on github for further reference: https://github.com/mrdoob/three.js/pull/7310

Answer 4

Encountering a similar issue in my latest project, I was able to resolve it by making adjustments to the lines within OrbitControls.js:

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

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

This was updated to:

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

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

A pull request has been submitted on github for further reference: https://github.com/mrdoob/three.js/pull/7310

Answer 5

Answer №3

After finding inspiration from Canvas's solution, I managed to discover a fix for my issue. Initially, I believed the problem lied within three.js/OrbitControls.js, but it turns out that using regular Javascript events did the trick.

var container = document.getElementById('container');
var active = false; //determines if the mouse is 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 6

After finding inspiration from Canvas's solution, I managed to discover a fix for my issue. Initially, I believed the problem lied within three.js/OrbitControls.js, but it turns out that using regular Javascript events did the trick.

var container = document.getElementById('container');
var active = false; //determines if the mouse is 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);
    }
};

Stop the page from scrolling when the mouse hovers over the scene in Firefox

Answer №1

Answer №2

Answer №3

Similar questions

Automatically trigger a page reload using a jQuery function

Is it possible to keep adding the keys of an array to themselves until reaching a specified limit

A guide on retrieving data with JSONP, Ajax, and jquery

How can I restrict the panning of an OrthographicCamera in OrbitControls to ensure that the object (texture image) remains within the visible bounds of the scene at

Initiate activity when link is clicked

Having trouble with fetching data in React from a URL?

Conceal flexbox item depending on neighboring element dimensions or content

invoking both componentDidMount and componentDidUpdate within the identical code block

Updating the content within a div following the submission of a contact form 7

Guidelines for adjusting the next/image component to a full 100% height

Tips for creating an output directory when the TypeScript files are stored in the './src' location

Ensuring that the content fits perfectly inside a div using either Bootstrap or

The react transition group fails to add the necessary CSS classes to the specified div

What is the process of transforming an object into a CSV format using JavaScript?

Display the invoice bill using text in a Vue component

Converting SVG to PNG image directly in the browser (compatible with all browsers, including Internet Explorer)

The FBXLoader in three.js is failing to properly import a 3D model from a FBX file

AngularJS: Pause the data binding functionality temporarily

Incorrect behavior of responsive background images

The prompt "npm run build" command resulted in a 126 Vercel exit status