How can I prevent scrolling while a loader is displayed during page loading?

How can I disable scrollability on my personal website when the page is loading with the loader wrapper? I have tried using overflow: hidden; in the CSS but it didn't work. The loader is set to display for 2.5 seconds. Any suggestions on how to achieve this would be greatly appreciated.

You can view my website at this link: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Elliott D'Orazio</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <meta content="Elliott-D'Orazio" property="og:title" />
  <meta content="my amazing portfolio website" property="og:description" />
  <script src="script.js" defer></script>
  <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
  <link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accdc3dfec9e829f829d">[email protected]</a>/dist/aos.css" rel="stylesheet">
...

:root{
  --accent-color-: #4022d3;
   color-scheme: dark light;
  --background-white: white;
  --background-dark: #222;
}
html:not(.dark) {
  --text: white;
  --background-color: var(--background-white);
}

html.dark {
  --background-color: var( --background-dark);
  --text: white;
}
html {
  height: 100%;
...

function $(qry){return document.querySelector(qry);}
setTimeout(() => {
  $(".loader-wrapper").classList.add("invis")
  $(".content").classList.add("vis")
}, 2500)

I am struggling to find a solution to disabling scrolling on my website during the loading phase with the loader. If you have any insights or solutions, please let me know. Thank you for your assistance!

javajquerycssloader

Answer №1

Make the loader class position fixed to prevent it from scrolling.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve the file name and additional attributes from a hidden input type

Is it possible to access the file name and other attributes of a hidden file when submitting it using the <input type="hidden"> tag? My current project involves drag and drop file functionality on a server using Node.js. If I am able to dynamically ...

javascriptjquerynode.jshtml

Ways to verify an iCheck located on the following page

Here is the code snippet I am currently working with: $("#add-new-size-grp").click( function (event) { event.preventDefault(); $.ajax({ type: "get", url:"ajax-get-sizes.php", success: function(result){ $("#sizeg ...

jquerycssdatatablesicheck

Encountering an org.openqa.selenium.NoSuchSessionException error due to an invalid session ID while using Cucumber in a

I am utilizing Selenium, Cucumber, and TestNG for my testing purposes and I have a unique requirement where I need to close and reopen a new browser in between my test feature. This is necessary because the application I am testing does not have a logout f ...

javaseleniumcucumber

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

Expanding the dimensions of a Meteor jQuery DataTable

Currently, I have implemented the jQuery DataTables plugin on Meteor without any packages and it has been quite successful. However, I am facing an issue with a specific table that is constantly being updated due to new insertions into the collection. The ...

jquerymeteordatatable

Restrict the number of rows in a real-time search JSON data by utilizing the $.each method

Is there a way to limit the number of rows returned in live search JSON data through URL? I attempted to count the table rows and return false, but it did not work. Any suggestions on how to achieve this? $(document).ready(function() { $.ajaxSetup ...

javascriptphpjqueryjsonajax

Utilizing Bootstrap's column grid system (col-sm) to set the width of form controls

Is it possible to utilize col-sm or col-xs within the input tag to specify its width? <div> <input type="button" class="col-sm-2" value="Clear"> <input type="button" class="col-sm-2" value="Confirm"> </div> ...

htmltwitter-bootstrapcsscoding-style

Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

I am currently working on enhancing the visual appearance of a Bootstrap 4 card and encountered an issue: https://i.stack.imgur.com/p8Qzhm.png The spacing between the About the gig heading and the top Date item appears to be uneven. I would like to make ...

htmlcssmargin

Steps for preventing the inclusion of all .test classes from the page in the code: Utilize $( ".test" ).insertBefore( ".test1" ) to add only specific classes

What is the best way to prevent including all instances of .test classes from the page in the code? One solution could be using the following code: $( ".test" ).insertBefore( ".test1" ) <div id="testdiv"> <div class="test1"></div> <d ...

jquery

Error interpreting the response string

After attempting to extract values from a response by parsing it into separate strings, I encountered some difficulties. The response text looks like this: response = "Data1{ key1='4722**********6', key2='2107', ...

javaandroidjsonstringparsing

Strategically stacking two Bootstrap columns for perfect alignment

I'm currently having trouble with aligning Bootstrap columns. Can someone assist me, please? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <di ...

htmlcssbootstrap-4

Sending a post request using an AngularJS service

I have implemented the following code in my application. The dataService holds all the $http requests in my app. In the controller, I am using this function to call a Web Api service which returns the correct response. However, when the function customer ...

javascriptjqueryangularjsasp.net-web-api

Utilizing jQuery to pinpoint elements with personalized data attributes

I am struggling with a few elements that look like this <p data-lang-bg="Bulgarian" data-lang-en="English" >Text</p> <p data-lang-bg="Other bulgarian text" data-lang-en="Other english text" >Text 2</p> How can I write a jQuery sel ...

jqueryhtmlcss-selectorsjquery-datacustom-data-attribute

The 3D hover effect is malfunctioning in the Firefox browser

I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I rem ...

htmlcsscss-transforms

Determine if the password is accurate using jQuery

Having some trouble with my login form. The JavaScript code always returns a false value, even when I'm entering the correct username and password. This is the jQuery code snippet: $(document).ready(function(){ var teamname = $("#teamname"); var te ...

phpjqueryformsauthenticationpasswords

Parallax Effect malfunctioning on iPhones

Hey there, I recently created a parallax UI using pure CSS. It seems to work fine on Android and desktop browsers, but when I tested it on iOS or iPhone, the parallax effect doesn't seem to be working correctly. I'm not sure why this is happening ...

htmlcssparallax

Unable to create a flawless circle using Canvas

No matter how hard I try, drawing a perfect circle seems impossible for me. Every time I attempt it, all I manage to create is an ellipse. Check out this code snippet I put together as an example: function canvasClicked(number) { var c = "canvas" + nu ...

javascripthtmlcsscanvas

leveraging the power of jquery colorbox to dynamically display an angularjs template

Routes are being used to render the body of a template, as shown below. The template loads without any issues at this point. Upon clicking a link within the rendered template (/templates/my-details), the goal is to trigger a colorbox popup and use another ...

jqueryangularjscolorboxngroute

Fixing a Deprecation Warning in Java related to Firefox ProfilesIni being deprecated can be achieved through various methods

When trying to use my custom Firefox profile, I encountered a Deprecation Warning with the following code: ProfilesIni myProfile = new ProfilesIni(); How can I resolve this issue while avoiding the @SuppressWarnings warning? import org.openqa.selenium.Web ...

javaseleniumselenium-firefoxdriversuppress-warningsdeprecation-warning

Challenges with CORS in AngularJS and Spring Security

I am currently in the process of setting up a module that combines Angular with Spring Security for user login and registration purposes. Everything seems to be working fine when I register a new user. However, I am encountering an error when the final ste ...

javascriptjavaangularjsspringspring-security