Webgl build disables mouse wheel scroll on webpage.

Question

Is there way to disable "preventDefault" somewhere in the code or in settings? My game is kinda clicks only and webpage should be scrollable as it is by default.

Mouse scroll wheel event stops inside unity webgl player.

Answer 1

Best Answer

Answer by idchlife · Feb 18, 2018 at 08:07 PM

@RagingPjotr I found partial solution. Well, it worked for product, sooo

http://hatebin.com/dmcgfbwqhc

Insert this into script tag after everything related to unity in html and modify 2500 milliseconds (2.5 seconds) to your preferred time.

My 3d loaded within 2 seconds so I made more time for this code to start.

If you have another selector than 'canvas' modify this too!

I solved it by basically imitating scroll. Feels clunky but gets the job done

Add comment · Show 2 · Share

RagingPjotr · Feb 19, 2018 at 12:01 AM 0

Share

Good call. I didn't bother with the timeout though, but added the listener in the UnityLoader js. It works though, thanks!

CorstiaanMediamonks · Jul 08, 2020 at 03:54 PM 0

Share

The hatebin link no longer works :-( any chance you could re-post there or maybe copy-paste here? would be awesome

Answer 2

Answer by RagingPjotr · Feb 18, 2018 at 10:39 AM

Hey @idchlife , did you ever find a solution for this? I'm having the same issue.

Add comment · Share

Answer 3

Found a great way to mouse wheel scroll a WebGL player in an iframe even without Unity<->Browser communication:

 <head>
     <style type="text/css">            
         iframe {    height:   calc(100%-120px);
                     width:    100%; }
     </style>
 </head>
 
 <body>
     
     <!-- 3d environment -->
     <iframe id="iframeUnityProject" src="UnityProject/index.html"></iframe>
     
     <script>
         // whenever a mouse wheel event occurs, execute ScrollingY()
         var iframeElement = document.getElementById("iframeUnityProject").contentWindow;
         iframeElement.addEventListener("wheel", ScrollingY, true);
         
         // manually scrolling iframe parent window
         // event.deltaY —> amount of lines to scroll as provided by OS
         // single line size in pixels —> usually the default font size of 16
         function ScrollingY( event ) { window.scrollBy({
             top: event.deltaY * 16,
             left: 0,
             behavior: 'smooth' });
         }
     </script>
         
 </body>

Hope this helps!

Answer 4

Answer by TDVDev · Jul 22, 2020 at 06:00 PM

Hi, maybe this will help you https://medium.com/@tuznev/enable-m...nside-unity3d-container-on-webgl-8dd4dc6a1784

Add comment · Share

Webgl build disables mouse wheel scroll on webpage.

4 Replies

Your answer

Follow this Question

Related Questions