How to remove full-screen styles in A-Frame, reduce canvas size or scroll page using A-Frame scene?

Question

A-Frame blocks scrolling on the page where I use it. When I open a page with my A-Frame scene, it occupies 100% of the width and height of the page, and I cannot scroll it. Is there a class that needs to be deleted?

Answer 1

You can use the component embeddedto remove full-screen styles and make it embedded in the web page. https://aframe.io/docs/0.3.0/components/embedded.html

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

Then you are free style <a-scene>as you wish

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