#UI Scrollbar Issue

33 messages · Page 1 of 1 (latest)

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
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
#

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
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
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
# strange owl Welcome

PagBounce 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.