Scroll_bar

Miguel_Paula · March 1, 2024, 12:44pm

Hi, I need to put a scrollbar on my panel but scrolling is already working but I want this on my panel

This code I’m using:

my JS:

import './css.css'

AFRAME.registerComponent('custom-panel', {
  init: function () {
    this.panel = document.createElement('div');
    this.panel.id = 'my-custom-panel';

    this.rolagem = true;

    this.atualizarRolagem = () => {
      this.panel.style.overflowY = this.rolagem ? 'auto' : 'hidden';
    };

    this.atualizarRolagem();

    this.panel.innerHTML = `
      <div class="content-container">
        <h2>Sofá Retrátil</h2>
        <div>
          <p>Milano</p>
          <img src="${require('./assets/milano-mini.jpg')}">
        </div>
        <div class="content-image">
          <p>Versato</p>
          <img src="${require('./assets/versato-mini.jpg')}" >
        </div>
        <div class="content-image2">
          <p>Palermo</p>
          <img src="${require('./assets/Palermo-mini.jpg')}" >
        </div>
        <div class="content-image3">
          <p>Tesla</p>
          <img src="${require('./assets/tesla-mini.jpg')}" >
        </div>
      </div>
    `;

    // button
    this.button = document.createElement('button');
    this.button.innerText = 'SOFÁS RETRÁTEIS';
    this.button.id = 'custom-button';
    this.button.style.position = 'absolute';
    this.button.style.top = '10px';
    this.button.style.right = '10px';
    this.button.style.width = '118px';
    this.button.style.height = '15px';
    this.button.style.background = '#000000';
    this.button.style.color = 'white';
    this.button.style.border = 'none';
    this.button.style.borderRadius = '20px';
    this.button.style.padding = '10px 20px';
    this.button.style.cursor = 'pointer';
    this.button.style.fontSize = '0.7rem';
    this.button.style.fontWeight = 'bold';
    this.button.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
    this.button.style.transition = 'transform 0.3s ease';
    this.button.style.backdropFilter = 'blur(10px)';
    this.button.style.border = '1px solid rgba(255, 255, 255, 0.18)';

    document.body.appendChild(this.button);

    document.body.appendChild(this.panel);

    this.button.addEventListener('click', () => {
      const isVisible = this.panel.style.display === 'block';
      this.panel.style.display = isVisible ? 'none' : 'block';
      this.button.innerText = isVisible ? 'SOFÁS RETRÁTEIS' : 'EXPERIÊNCIA AR';
      this.button.style.zIndex = isVisible ? '9999' : '10000';
      this.button.style.width = isVisible ? '118px' : '110px';
      this.rolagem = !isVisible;
      this.atualizarRolagem();
    });
  }
});

// Add this component to an A-Frame entity in your HTML
// <a-entity custom-button></a-entity>

my CSS:

#my-custom-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    color: white;
    padding: 20px;
    display: none;
    z-index: 9999;
    overflow-y: auto;
}

#my-custom-panel div {
    margin: 5%;
    height: 90%;
}

#my-custom-panel h2 {
    text-align: center;
    color: rgb(64, 64, 64);
}

#my-custom-panel img {
    max-width: calc(100% - 10%);
    height: auto;
    display: block;
    margin: 10px auto;
}

#my-custom-panel p {
    text-align: center;
    color: rgb(64, 64, 64);
}

.content-container {
  transform: translateX(-20px);
}

@media screen and (orientation: portrait) {
    .content-image {
        transform: translateY(-300px);
    }
    .content-image2 {
        transform: translateY(-600px);
    }
    .content-image3 {
        transform: translateY(-900px);
    }
}

@media screen and (orientation: landscape) {
    .content-image {
        transform: translateY(0px);
    }
    .content-image2 {
        transform: translateY(0px);
    }
    .content-image3 {
        transform: translateY(0px);
    }
}

TonyT · March 1, 2024, 5:48pm

Sounds like this is what you’re trying to do?

Miguel_Paula · March 2, 2024, 5:02pm

It worked… Thank you so much.

Miguel_Paula · March 5, 2024, 11:45pm

Hi again. I changed the code and then it stopped working but the scrolling is working but the scrollbar is not showing can you help me?

Miguel_Paula · March 5, 2024, 11:47pm

Here my new code:
CSS:

/* Estilos para o painel */
#my-custom-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    color: white;
    padding: 20px;
    display: none; /* Inicialmente oculto */
    z-index: 9999;
    overflow-y: hidden;
    overflow: auto;
    transform: translateX(-7px); /* Ajuste o valor conforme necessário */
}

#my-custom-panel h2 {
    text-align: center;
    color: rgb(64, 64, 64);
    transform: translateX(-10px); /* Ajuste o valor conforme necessário */
}

#my-custom-panel h3 {
    text-align: center;
    color: rgb(64, 64, 64);
    transform: translateX(-10px); /* Ajuste o valor conforme necessário */
}

@media screen and (orientation: portrait) {
    .img-espacoY{
        transform: translateY(0px);
    }
    .img-espacoX{
        transform: translateX(0px);
        scale: 95%;
    }

    .img-espacoY2{
        transform: translateY(-125px);
    }
    .img-espacoX2{
        transform: translateX(-45px);   
    }
    .img-tamanho2{
        transform: scale(10%);
    }

    .img-espacoY3{
        transform: translateY(-225px);
    }
    .img-espacoX3{
        transform: translateX(-10px);
        scale: 95%;
    }

    .img-espacoY4{
        transform: translateY(-325px);
    }
    .img-espacoX4{
        transform: translateX(-15px);
        scale: 100%;
    }

    #my-custom-panel img {
        width: 100%;
        height: auto;
        display: block;
        margin: 5px auto;
    }

    #my-custom-panel div {
        max-height: 100%;
        height: 70%;
    }
}

@media screen and (orientation: landscape) {
    .img-espaco{
        transform: translateY(0px);
    }
    .img-espaco2{
        transform: translateY(-150px);
    }
    .img-espaco3{
        transform: translateY(-250px);
    }
    .img-espaco4{
        transform: translateY(-375px);
    }

    #my-custom-panel img {
        width: 100%;
        height: auto;
        display: block;
        margin: 5px auto;
    }

    #my-custom-panel div {
        height: 105%;
        max-height: 105%;
    }
}

JS:

import './css.css'

AFRAME.registerComponent('custom-panel', {
  init: function () {
    // Cria o painel
    this.panel = document.createElement('div');
    this.panel.id = 'my-custom-panel';
    this.panel.style.zIndex = '9999';

    this.panel.innerHTML = `
      <div class="espaco">
        <h2 class="content-text">Sofá Retrátil</h2>
        <div class="img-espacoY">
          <h3>Milano</h3>
          <img src="${require('./assets/milano-mini.jpg')}" class="img-espacoX">
        </div>
        <div class="img-espacoY2">
          <h3>Versato</h3>
        <img src="${require('./assets/versato-mini.jpg')}" class"img-espacoX2" class"img-tamanho2">
        </div>
        <div class="img-espacoY3">
          <h3>Palermo</h3>
          <img src="${require('./assets/Palermo-mini.jpg')}" class="img-espacoX3">
        </div>
        <div class="img-espacoY4">
          <h3>Tesla</h3>
          <img src="${require('./assets/tesla-mini.jpg')}" class="img-espacoX4">
        </div>
        <!-- Mais imagens e descrições conforme necessário -->
      </div>
    `;

    // Cria o botão
    this.button = document.createElement('button');
    this.button.innerText = 'SOFÁS RETRÁTEIS'; // Texto do botão
    this.button.id = 'custom-button'; // id CSS
    this.button.style.position = 'absolute'; // Garantindo que ele nunca fique se mechendo junto com a camera
    this.button.style.top = '10px'; // Posição no topo da página
    this.button.style.right = '10px'; // Posição à esquerda da página
    this.button.style.width = '118px'; // Largura do botão reduzida
    this.button.style.height = '15px'; // Altura do botão reduzida
    this.button.style.background = '#000000'; // Cor preta sólida
    this.button.style.color = 'white'; // Cor do texto
    this.button.style.border = 'none'; // borda
    this.button.style.borderRadius = '20px'; // Borda muito arredondada
    this.button.style.padding = '10px 20px';
    this.button.style.cursor = 'pointer';
    this.button.style.fontSize = '0.7rem';
    this.button.style.fontWeight = 'bold';
    this.button.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
    this.button.style.transition = 'transform 0.3s ease';
    this.button.style.backdropFilter = 'blur(10px)';
    this.button.style.border = '1px solid rgba(255, 255, 255, 0.18)';

    // Efeito hover
    this.button.onmouseover = function() {
      this.style.transform = 'scale(1.05)';
    };

    this.button.onmouseout = function() {
      this.style.transform = 'scale(1)';
    };

    // Adiciona o botão ao body
    document.body.appendChild(this.button);

    document.body.appendChild(this.panel);

    // Evento de clique no botão para mostrar/ocultar o painel
    this.button.addEventListener('click', () => {
      const isVisible = this.panel.style.display === 'block';
      this.panel.style.display = isVisible ? 'none' : 'block';
      this.button.innerText = isVisible ? 'SOFÁS RETRÁTEIS' : 'EXPERIÊNCIA AR';
      this.button.style.zIndex = isVisible ? '9999' : '10000';
      this.button.style.width = isVisible ? '118px' : '110px';
    });
  }
});

// Add this component to an A-Frame entity in your HTML
// <a-entity custom-panel></a-entity>

Ian · March 6, 2024, 12:12am

Here are some initial things to take a look into:

Remove Redundant Overflow Property: You have both overflow-y: hidden; and overflow: auto; defined for #my-custom-panel. This is contradictory because overflow-y: hidden; tells the browser to hide the vertical scrollbar, while overflow: auto; tells it to show a scrollbar if the content overflows. You should remove or adjust these properties to ensure they are not conflicting.
Enable Vertical Scrolling: If you want the vertical scrollbar to appear when the content overflows, you should use overflow-y: auto; and remove the overflow: auto; line. This explicitly tells the browser to manage vertical overflow by displaying a scrollbar when necessary.
Adjust Container Height: Ensure that the container’s height (#my-custom-panel) is set in a way that could potentially overflow, considering the viewport size and the content inside it. Since you’ve set it to 100vh, which means 100% of the viewport height, ensure that your content is indeed tall enough to require scrolling.

Here’s how you can adjust the CSS for #my-custom-panel:

#my-custom-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    color: white;
    padding: 20px;
    display: none; /* Inicialmente oculto */
    z-index: 9999;
    overflow-y: auto; /* Show vertical scrollbar when needed */
    transform: translateX(-7px); /* Ajuste o valor conforme necessário */
}

Make sure to test these changes

Miguel_Paula · March 6, 2024, 12:21am

It still didn’t work. Can you help me?

Ian · March 6, 2024, 12:32am

Hi @Miguel_Paula Yes, we are happy to help. There are a couple routes you can take moving forward.

You can open up the experience via the chrome inspector (android) or safari technology preview (iphone) and inspect the page to better understand what settings are needed for the scroll bar to work correctly
Secondly, you can implement a scroll bar in a new blank project to verify that no other code could be interfering with your current implementation.

I would take these steps to better understand what your CSS is doing in your project along with referencing the links that Tony shared.

Miguel_Paula · March 6, 2024, 12:39am

I still don’t know what fixing can help me? Like giving me some correction, or telling me what to do.

Miguel_Paula · March 8, 2024, 4:36pm

I think I will have to create a function to do this, can you help me do it? Because I tested everything but nothing works.

Ian · March 9, 2024, 12:48am

Hello @Miguel_Paula I’ll be happy to share a step by step process of how to create a scroll bar in your project. (make sure you have a z-index: 999; so the UI shows up in front of scene)

To add a UI panel with scroll ability to your A-Frame project, you’ll need to create a custom HTML element for the UI and then use CSS to style it, including the scroll behavior. Since A-Frame is built on top of the standard web technologies, you can integrate regular HTML and CSS directly with your A-Frame scene for UI elements that are not part of the 3D scene.

Here’s how you can achieve this:

Add the UI HTML Structure: You’ll insert an HTML structure for your UI panel directly into your body.html file, outside the <a-scene> tag. This ensures that the UI panel is part of the standard DOM and not rendered as a 3D object within the A-Frame environment.
Style the UI with CSS: You’ll use CSS to style the UI panel, including setting its position on the screen, dimensions, and enabling the scroll bar for overflow content.

Here’s an example of how you can implement and style the UI panel:

1. Add the UI HTML Structure

Insert the following HTML structure into your body.html file, preferably right after the <a-scene> tag:

htmlCopy code

<div id="ui-panel">
  <div class="scrollable-content">
    <!-- Your dynamic or static content goes here -->
    <p>Item 1</p>
    <p>Item 2</p>
    <!-- Add more items as needed to demonstrate scrolling -->
  </div>
</div>

2. Style the UI with CSS

Add the following CSS rules to your index.css file. This CSS will position the UI panel on the screen, give it a specific size, add a background color for visibility, and enable scrolling for overflow content:

cssCopy code

#ui-panel {
  position: absolute; /* Position relative to the browser window */
  top: 20px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  width: 200px; /* Adjust width as needed */
  height: 300px; /* Adjust height as needed */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  border: 1px solid #ddd; /* Light gray border */
  overflow-y: auto; /* Enable vertical scrolling */
  padding: 10px; /* Padding around content */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Optional: Adds shadow for depth */
  z-index: 999; /* Ensures the panel appears above most other elements */
}

.scrollable-content p {
  margin-bottom: 10px; /* Adds space between paragraphs */
}

This setup creates a UI panel positioned at the top-right of the viewport (adjust top and right values as needed). The panel is designed to scroll vertically (overflow-y: auto;) if the content exceeds the panel’s height. You can adjust the width and height values to fit your content needs. I’ve attached a photo of this working in an 8th Wall basic project.

Miguel_Paula · March 9, 2024, 2:26am

Yes, but it doesn’t work in my code, I already tested it but it didn’t work, can you try this in my code?
My code is a little further behind the conversation.

Ian · March 9, 2024, 4:43am

Hi @Miguel_Paula as I stated I would suggest starting off very simple to better understand what could be the problem. Starting off with all the code it is very difficult to debug.

Some things I see initially is first where are you importing your import './css.css' ? Is this in your app.js file? That is where it should be located not in the body.html.
in your CSS you have display: none; Property : Initially, your panel is set to display: none; , which means it will not be visible. Your JavaScript correctly toggles this to display: block; when the button is clicked. Make sure the button click is actually triggering this event listener. You might want to add a console log to confirm the event is being fired. I would suggest initially keeping it to display: block for debugging purposes.
Potential Typo in HTML Attribute: In the part where you are setting the images’ class, there seems to be a typo. For example:

<img src="${require('./assets/versato-mini.jpg')}" class"img-espacoX2" class"img-tamanho2">

It should be:

<img src="${require('./assets/versato-mini.jpg')}" class="img-espacoX2 img-tamanho2">

I would start off very simple and then slowly add things.

Miguel_Paula · March 9, 2024, 2:52pm

yes
I’ll try
I took it because I fixed the image

Miguel_Paula · March 16, 2024, 6:49pm

Hi again, I removed that part you mentioned. Can you help me with some code that I can add or change some part of the code?

Ian · March 18, 2024, 5:49pm

Hello @Miguel_Paula we are happy to help. Please make sure to try the code I’ve supplied in a basic project to better understand how the scroll bar works. This would really help you in your development.

What code do you need help with?

Miguel_Paula · April 4, 2024, 5:38pm

Hi, it took me a while to respond. But I need to push 5 pixels for the scroll bar to appear because I pushed everything to the side. Can you help me push just the scroll bar?

Miguel_Paula · April 4, 2024, 5:41pm

the code I provided earlier is the code I’m using. But I made a few minor changes that didn’t change anything.

Miguel_Paula · May 4, 2024, 9:58pm

Hi, I managed to fix it! It’s my code that wasn’t compatible. I changed a few things and got it.

Topic		Replies	Views
How to make a panel with images? 🧑‍💻 Technical Support	14	73	February 27, 2024
8th Wall Renderer Causing Issues 🧑‍💻 Technical Support	10	134	June 21, 2024
Button struggles 🧑‍💻 Technical Support	9	280	April 5, 2024
Blame the DOM? 🧑‍💻 Technical Support	4	67	June 22, 2024
Headset support 🧑‍💻 Technical Support	9	17	October 21, 2024

Scroll_bar

1. Add the UI HTML Structure

2. Style the UI with CSS

Related topics