Enable mouse scroll functionality inside Unity3D container on WebGL

2 min readJun 16, 2020

Hello! Not everyone knows this, but when you upload your game to a server and try to scroll inside Unity application like on a normal webpage the scroll functionality will not work properly. In this article I’ll explain how to enable scrolling inside the Unity application, so you can navigate thought web page as one unit. I want to point out that my method only works if the game does not use the scroll view.

First of all, you need to export your game as WebGL project. To do this, you need to select at File->Build Settings option WebGL. Then click on Build button and select the location where you want to save the project. Once Unity successfully create the export and open build directory, you will see such hierarchy:

We are interested in the index.html file. I want to notice that Unity always generates index.html and other files from scratch according to the so-called WebGLTemplates. You can learn more about them here: https://docs.unity3d.com/Manual/webgl-templates.html

Open the index.html file with any text editor (I opened it with Notepad++). Here you will see the standard code that Unity created:

<!DOCTYPE html>
<html lang=”en-us”>
<head>
<meta charset=”utf-8">
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8"><title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
<link rel=”shortcut icon” href=”TemplateData/favicon.ico”>
<link rel=”stylesheet” href=”TemplateData/style.css”>
<script src=”TemplateData/UnityProgress.js”></script>
<script src=”%UNITY_WEBGL_LOADER_URL%”></script>
<script>
var gameInstance = UnityLoader.instantiate(“gameContainer”, “%UNITY_WEBGL_BUILD_URL%”, {onProgress: UnityProgress});
</script>
</head>
<body>
<div class=”webgl-content”>
<div id=”gameContainer” style=”width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px”></div>
<div class=”footer”>
<div class=”webgl-logo”></div>
<div class=”fullscreen” onclick=”gameInstance.SetFullscreen(1)”></div>
<div class=”title”>%UNITY_WEB_NAME%</div>
</div>
</div>
        <!-- Place for scroll code -->
</body>
</html>

We are interested in the <body>… </body> division where we will insert the script. Replace “<! — Place for scroll code — >” with this section:

<script>
document.addEventListener('wheel', onScroll, false);
document.addEventListener('mousemove', onMouse, false);
var content = document.getElementsByClassName('webgl-content');function onMouse() { content[0].style['pointer-events'] = 'auto'; }
function onScroll() { content[0].style['pointer-events'] = 'none'; }</script>

This code subscribes to two web page events:

‘wheel’ which is responsible for the scroll
‘mousemove’ which is responsible for change of mouse cursor position

The script disables the ‘pointer-events’ page style if user scrolls the web page and turns it on again when the user moves the mouse. Save the file, refresh the page and you can now scroll a web page entirely. I hope my solution will help you!

Enable mouse scroll functionality inside Unity3D container on WebGL

Written by Denys Tiuzniev