How to remove fullscreen styles in A-Frame, reduce canvas size, or scroll a page with A-Frame scene?

Question

A-Frame is locking the scroll in the page where I am using it. When I open a page with my A-Frame scene, it takes up 100% page width and height and I cannot scroll. Is there a class I have to remove?

Answer 1

You can use the embedded component to remove fullscreen styles and make it embeddable within a web page. https://aframe.io/docs/1.1.0/components/embedded.html

<a-scene embedded> 
  <!-- scene stuff -->
</a-scene>

Then you are free the style <a-scene> how you wish

a-scene { display: block; width: 50%; }