Hidden Scroll Bar in HTML,CSS

Question

I have the following code:

 // Preloader $(window).on('DOMContentLoaded', function() { if ($('#preloader').length) { $('#preloader').delay(500).fadeOut('slow'); } });

 * { padding: 0; margin: 0; box-sizing: border-box; } @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap'); .svg-file { width:40vw; max-width:133px; }.svg-file path { fill: transparent; stroke-width: 3; stroke: rgb(1, 36, 133); }.svg-file.z-logo path { stroke-dasharray: 550; stroke-dashoffset: 0; }.svg-file.z-logo path { animation: animate-zlogo 2s linear infinite; }.svg-file.z-logo svg { filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)); transform: scale(2); }.svg-file h2 { font-family: "Roboto", cursive; transform: translate(0, 50px) skewX(-210deg) rotate(-6deg); font-size: 3em; color: #044d77; }.svg-file span { animation: dots 2.5s steps(6, end) infinite; font-size: 5em; display: block; transform: translate(0, 65px) skewX(-210deg) rotate(-6deg); background-color: rgb(5, 46, 80); width: 8px; height: 5px; } @keyframes fadein-fadeout { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes animate-zlogo { 0% { stroke-dashoffset: -50; } 20% { stroke-dashoffset: 550; fill: transparent; } 40% { fill: transparent; stroke-dashoffset: 1100; } 60% { stroke-dashoffset: 1100; fill: #05f7f9; } 80% { stroke-width: 0; fill: #05f7f9; } 100% { /* stroke-dashoffset: 0; */ stroke-width: 3; fill: transparent; } } #preloader { position: fixed; z-index: 9999; overflow: hidden; background: white; display: flex; justify-content: center; align-items: center; align-content: center; top: 0px; left: 0px; bottom: 0px; right: 0px; }.z-logo svg { top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; justify-content: center; align-items: center; align-content: center; position: relative; display: flex; width: 50%; }.z-logo::before { content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; background: black; position: absolute; display: inline-flex; border: 1px solid black; width: 60vw; max-width: 200px; height: 60vw; max-height: 200px; }

 <:-- Preloader --> <div id="preloader"> <div class="svg-file z-logo"> <svg xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"> <g id="H"> <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" /> </g> </svg> </div> </div> <section> Scroll bar should now appear </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section>

See how when you run the above code, the scroll bar appears for a glimpse second? I would not like that. I would like the scroll bar to only appear after the preloader screen or when the preloader disappears. Is there a way to only hide the scroll bar (both x and y) on the preloader screen? Any suggestions?

Answer 1

I have the following code:

 // Preloader $(window).on('DOMContentLoaded', function() { if ($('#preloader').length) { $('#preloader').delay(500).fadeOut('slow'); } });

 * { padding: 0; margin: 0; box-sizing: border-box; } @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap'); .svg-file { width:40vw; max-width:133px; }.svg-file path { fill: transparent; stroke-width: 3; stroke: rgb(1, 36, 133); }.svg-file.z-logo path { stroke-dasharray: 550; stroke-dashoffset: 0; }.svg-file.z-logo path { animation: animate-zlogo 2s linear infinite; }.svg-file.z-logo svg { filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)); transform: scale(2); }.svg-file h2 { font-family: "Roboto", cursive; transform: translate(0, 50px) skewX(-210deg) rotate(-6deg); font-size: 3em; color: #044d77; }.svg-file span { animation: dots 2.5s steps(6, end) infinite; font-size: 5em; display: block; transform: translate(0, 65px) skewX(-210deg) rotate(-6deg); background-color: rgb(5, 46, 80); width: 8px; height: 5px; } @keyframes fadein-fadeout { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes animate-zlogo { 0% { stroke-dashoffset: -50; } 20% { stroke-dashoffset: 550; fill: transparent; } 40% { fill: transparent; stroke-dashoffset: 1100; } 60% { stroke-dashoffset: 1100; fill: #05f7f9; } 80% { stroke-width: 0; fill: #05f7f9; } 100% { /* stroke-dashoffset: 0; */ stroke-width: 3; fill: transparent; } } #preloader { position: fixed; z-index: 9999; overflow: hidden; background: white; display: flex; justify-content: center; align-items: center; align-content: center; top: 0px; left: 0px; bottom: 0px; right: 0px; }.z-logo svg { top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; justify-content: center; align-items: center; align-content: center; position: relative; display: flex; width: 50%; }.z-logo::before { content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; background: black; position: absolute; display: inline-flex; border: 1px solid black; width: 60vw; max-width: 200px; height: 60vw; max-height: 200px; }

 <:-- Preloader --> <div id="preloader"> <div class="svg-file z-logo"> <svg xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"> <g id="H"> <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" /> </g> </svg> </div> </div> <section> Scroll bar should now appear </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section>

See how when you run the above code, the scroll bar appears for a glimpse second? I would not like that. I would like the scroll bar to only appear after the preloader screen or when the preloader disappears. Is there a way to only hide the scroll bar (both x and y) on the preloader screen? Any suggestions?

Answer 2

I have the following code:

 // Preloader $(window).on('DOMContentLoaded', function() { if ($('#preloader').length) { $('#preloader').delay(500).fadeOut('slow'); } });

 * { padding: 0; margin: 0; box-sizing: border-box; } @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap'); .svg-file { width:40vw; max-width:133px; }.svg-file path { fill: transparent; stroke-width: 3; stroke: rgb(1, 36, 133); }.svg-file.z-logo path { stroke-dasharray: 550; stroke-dashoffset: 0; }.svg-file.z-logo path { animation: animate-zlogo 2s linear infinite; }.svg-file.z-logo svg { filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1)); transform: scale(2); }.svg-file h2 { font-family: "Roboto", cursive; transform: translate(0, 50px) skewX(-210deg) rotate(-6deg); font-size: 3em; color: #044d77; }.svg-file span { animation: dots 2.5s steps(6, end) infinite; font-size: 5em; display: block; transform: translate(0, 65px) skewX(-210deg) rotate(-6deg); background-color: rgb(5, 46, 80); width: 8px; height: 5px; } @keyframes fadein-fadeout { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes animate-zlogo { 0% { stroke-dashoffset: -50; } 20% { stroke-dashoffset: 550; fill: transparent; } 40% { fill: transparent; stroke-dashoffset: 1100; } 60% { stroke-dashoffset: 1100; fill: #05f7f9; } 80% { stroke-width: 0; fill: #05f7f9; } 100% { /* stroke-dashoffset: 0; */ stroke-width: 3; fill: transparent; } } #preloader { position: fixed; z-index: 9999; overflow: hidden; background: white; display: flex; justify-content: center; align-items: center; align-content: center; top: 0px; left: 0px; bottom: 0px; right: 0px; }.z-logo svg { top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; justify-content: center; align-items: center; align-content: center; position: relative; display: flex; width: 50%; }.z-logo::before { content: ""; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; background: black; position: absolute; display: inline-flex; border: 1px solid black; width: 60vw; max-width: 200px; height: 60vw; max-height: 200px; }

 <:-- Preloader --> <div id="preloader"> <div class="svg-file z-logo"> <svg xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"> <g id="H"> <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" /> </g> </svg> </div> </div> <section> Scroll bar should now appear </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section> <section> random content </section>

See how when you run the above code, the scroll bar appears for a glimpse second? I would not like that. I would like the scroll bar to only appear after the preloader screen or when the preloader disappears. Is there a way to only hide the scroll bar (both x and y) on the preloader screen? Any suggestions?