UI Scrollbar Issue

[supple crow]

Why are Vertical + Horizontal Scrollbars still showing up when I've already added overflow: hidden'; elements(?) (or whatever they are called) to My .html files and .css file? (See Attached Video)

I'm trying to get rid of them completely but they keep showing up and I can't figure out why.., anyone know why this is happening / how to fix it?

This (below) is what I have in My .html and .css files regarding the overflow function/element:

index.html:

 .window {
   width: 50%;
   height: 100vh;
   background-color: #000000;
   overflow: hidden;
   position: absolute;
   transition: all 1s ease;
 }

style.css:

body{
    color: #fff;
    margin: 0;
    text-align: center;
    background: #000;
    cursor: crosshair;
    overflow: hidden;
}

[strange owl]

You need to set your canvas size to the size of your window element and add overflow hidden to your canvas element

[supple crow]

In the index.html?

[supple crow]

This is what My index.html currently looks like:
https://pastebin.com/U18Myqu2

[strange owl]

where you've defined those previous css lines. and window size will be edited in your 3d js file.

[supple crow]

Oh so I need to change something in the .js file for the ThreeJS scene, ok

[strange owl]

@supple crow Also set canvas's overflow:hidden in index.html

[supple crow]

When searching canvas in the index.js file (for the threejs scene) it shows this:

// Create a gradient texture                                                                      //
var canvas = document.createElement('canvas');                                                    //
var context = canvas.getContext('2d');                                                            //
canvas.width = 256;                                                                               //
canvas.height = 1;                                                                                //
//                                                                                                //
var gradient = context.createLinearGradient(0, 0, 256, 0);                                        //
gradient.addColorStop(0, '#' + colors[0].toString(16));                                           //
gradient.addColorStop(0.5, '#' + colors[1].toString(16));                                         //
gradient.addColorStop(1, '#' + colors[2].toString(16));                                           //
//                                                                                                //
context.fillStyle = gradient;                                                                     //
context.fillRect(0, 0, 256, 1);                                                                   //
//                                                                                                //
// Create a texture from the gradient                                                             //
var texture = new THREE.CanvasTexture(canvas);                                                    //
texture.wrapS = THREE.ClampToEdgeWrapping;                                                        //
texture.wrapT = THREE.ClampToEdgeWrapping;                                                        //
texture.minFilter = THREE.LinearFilter;                                                           //
texture.magFilter = THREE.LinearFilter;   

[supple crow]

which line?

or did you mean in the .container section perhaps?
Srry I'm still new to html and css haha 😅

[strange owl]

canvas.width = 256; canvas.height = 1;
Replace these with
canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight;

Add this above .window line
canvas { overflow: hidden }

[supple crow]

That didn't work and it also messed up with gradient

[strange owl]

Maybe give me the full js file

[supple crow]

Ok sure one sec

you want the html as well?

[strange owl]

yeah

you already gave it

[supple crow]

Forgot to mention there's another .html file

[strange owl]

If possible give me all the files please.

[supple crow]

Sure, one sec

[supple crow]

The new-app folder btw, is the actual website currently

[strange owl]

Just add these 2 line before .container line
body { margin: 0 !important; overflow: hidden !important; }
This solution was not related to threejs so you should close it now.

[supple crow]

Like this, ye?

And yeah I know it's not ThreeJS specifically, I couldn't find a general tag and could only see the general one with the ThreeJS logo so 🤷 ..and I didn't know if this would be ok to ask in #general

[strange owl]

yeah like this. NP

[supple crow]

Ok sweet I'll try it now, should I also revert to:
canvas.width = 256;
canvas.height = 1;

..in the index.js file, to fix the gradient?

[strange owl]

yes revert back to original

[supple crow]

👍

[strange owl]

Welcome

[supple crow]

It works! You're a legend ❤️ Been trying to figure that out for like an hour or two lol

If You're available / not busy atm, is there any chance You could help Me add a couple extra features? The next thing I plan to add is some smooth transitions.

When Electron boots up via the npm start command, I want to make it start on a solid black screen then smoothly transition into the animation aka the part with the grey-bg + yellow-circle logo (..which by the way is temporary!) and then I want to make it so that after that animation is done, it goes back to a black screen then the ThreeJS Scene slowly appears on-screen

[strange owl]

Thanks, So sorry but I am still a noob in animations so can't help with that one but you can check out gsap package if you know js.