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

Error received when attempting AJAX call with jQuery 1.7.2: NS_ERROR_XPC_NOT_ENOUGH_ARGS

Encountering an issue with jQuery version 1.7.2 and the ajax function. When running the code snippet below, Firefox Firebug console displays the following error: NS_ERROR_XPC_NOT_ENOUGH_ARGS: Not enough arguments [nsIDOMLocation.replace] var wei ...

javascriptjqueryajaxobjectjquery-1.7

The SendKeys() function seems to be malfunctioning in a specific field within my form

I am experiencing a particular issue with the sendKeys() function. It seems to be malfunctioning only in one specific field within my form. Despite filling in the field, the value remains unchanged and the test passes without any error message. In a diffe ...

javaseleniumautomationsendkeys

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

Utilizing jQuery to send an Ajax GET request for a JSON file

Recently I have begun delving into the world of jQuery and Ajax, attempting to utilize both technologies to retrieve a JSON FILE. Below is the structure of the file: [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": f ...

javascriptjqueryjsonajax

The Jquery Datatable fails to display the accurate number of rows based on the selections made in the dropdown

I am working on an ajax call that returns a table. In the success method, I am using $("#tableID").dataTable();. Although it shows paging and the number of rows in the dropdown, it is displaying all rows instead of only the number of rows selected in the d ...

javascriptjqueryajaxdatatables

Utilizing Bootstrap and Javascript to efficiently handle multiple forms

My website uses Bootstrap for layout, and I need to submit a form that is duplicated for different screen sizes - one for large layouts and another for mobile. However, both forms go to the same endpoint, so I have to give them unique IDs. <div class=&q ...

javascriptjquerybootstrap-4

Rotate Text in HTML <thead> Tag

I need assistance with rotating a table header. https://i.stack.imgur.com/hcvxx.png The HTML th elements within the thead section are described as follows: <th> <span class="rotate-all">Period</span> </th> <th> < ...

javascripthtmlcss

Issues with the parallax zooming out effect

Delving into the world of parallax effects, I'm on a quest to achieve a captivating zoom-out effect while scrolling. However, I'm encountering an issue where the image shrinks beyond the browser width and the div's height. In the example pr ...

jqueryhtmlcssparallaxzooming

What is the best way to manipulate the size and orientation of an image upon hovering over

I'm struggling to figure out how to simultaneously rotate and scale a .png file when the user hovers over it. Currently, it only scales when I hover on the picture. I understand that the scale property overwrites the first transform but I can't s ...

htmlcssrotationhoverscale

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

javascriptjqueryhtmlcss

Dynamically insert letters into each row as the HTML table increases

How can I display dynamically increasing alphabets in a newly generated cell on the left side of each row, based on the option selected in a dropdown list? These alphabets will serve as bullet points or serial numbers for the text boxes in each row. View ...

javascriptjquery

Error Loading JQuery: The function $() is not recognized in the Shopify platform

I seem to be overlooking something obvious. I am using Shopify and have included jQuery in the head section of the theme.liquid file: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> This script is placed rig ...

javascriptjquery

Discovering the utilization of `new JSONArray(String[])` in Android

When attempting to create a JSONArray in a file located within a linked Folder to an Android Project, eclipse is now showing me the error: Call requires API level 19 (current min is 14): new org.json.JSONArray The code where this error occurs is as foll ...

javaandroidjsonapi

Error caused by a nonexistent object in Selenium

try { catch (IOException e) { System.out.println("Test d"); } Whenever I execute the code above, I encounter the following exception: Exception in thread "main" java.lang.NullPointerException at test.testing.main(t ...

javaseleniumselenium-webdriver

Updating select option values without reloading the page using a modalHere is an efficient method for updating

Is there a way we can update the select tag option values without having to reload the page after submitting data in the bootstrap modal? Currently, we are facing an issue where the submitted values do not show up in the option tag until the page is reload ...

phpjqueryajax

Is your CSS failing to display images properly?

I recently launched my website, www.alphenweer.nl, and everything seems to be working fine except for the images in the template. Despite being on the correct URL, the images fail to load when the website is accessed. You can test it out here. Can someone ...

cssimage

Customize the Width of DropDown List Items with Razor

I'm having trouble adjusting the width of items in a DropDownList. I want the width of the DropDown items to be different from the DropDown itself. Can anyone assist me with this? <div class="col-md-3"> @f.FormGroup().DropDownList("IdTipoAc ...

jquerycssasp.net-mvcrazor

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

javascripthtmljquerycss

JavaScript form not working on submission

When my form is submitted, a function is called that successfully redirects users on desktop to either the download-confirmation or download-failure page. However, when testing on mobile devices such as iOS and iPad, the redirection does not seem to work. ...

javascripthtmljqueryajaxforms

updating the HTML DOM elements using JavaScript is not yielding any response

One way that I am trying to change the background of a div is by using a function. Below is an example of the html code I am working with: $scope.Background = 'img/seg5en.png'; document.getElementById("Bstyle").style.background = "url("+$scope.B ...

javascripthtmlcssangularjsionic-framework