How to scroll over aframe scene on mobile devices - html

Question

Is there a way to scroll over aframe on mobile devices, I tried to disable the controls of the scene but still can't scroll, and it keeps interacting

Answer 1

Here's one approach - create an overlay element over the scene, which will prevent interaction and
hide the overlay when it's "double tapped"
show the overlay when anything outside the scene is clicked
So lets say somewhere within you scrollable content you have a HTML setup like this:
<div id="aframe-content">
<div id="aframe-overlay"></div>
<a-scene embedded>
<!-- cool stuff --->
</a-scene>
</div>
and the css set up so that the overlay works within a scrollable column:
#aframe-content {
position: relative;
}
#aframe-overlay {
z-index: 10000;
position: absolute;
}
a-scene, #aframe-overlay {
height: 300px;
width: 100%;
}
we only need to add the js responsible for hiding / showing the overlay:
const overlay = document.querySelector("#aframe-overlay");
const acanvas = document.querySelector("canvas.a-canvas")
// helper boolean, so that on each touch we don't need to compare HTML elements
var overlayHidden = false;
function setOverlay(enabled) {
overlayHidden = !enabled
overlay.style.display = overlayHidden ? "none" : "block";
}
function hideOverlay(evt) {
if (overlayHidden && evt.target !== acanvas) {
setOverlay(true)
}
}
var showOverlay = setOverlay.bind(this, false)
overlay.addEventListener("dblclick", showOverlay);
window.addEventListener("click", hideOverlay);
window.addEventListener("touchstart", hideOverlay);
You can check it out in this glitch which seems to be working both on PC and mobile. Click on the fish to see the source code.