My website is primarily a Single Page Website, however, there are specific pages that can only be accessed by registered users. On the website, there is a section referred to as a "block" where you will find a button labeled "Login / Register". Upon clicking this button, a login and registration form will appear.
Because the registration process requires input of various information such as first and last name, email, password (entered twice), reCAPTCHA verification, and agreeing to the terms of use, we designed it in a way that it appears like a separate page. To expedite the process, I incorporated this registration form on the main page with styles of position:fixed;, overflow:auto;, and initially set to display:none;. Once the "login / register" button is clicked, it changes to display:block; while also adding overflow:hidden; to the HTML and body elements. The functionality works smoothly, allowing scrolling up and down, although the appearance of the scroll bar appears peculiar.
Below is the JavaScript (jQuery) code snippet:
function login(){
$('#loginpopup').css({"display":"block","opacity":"0"});
$('#loginpopup').animate({"opacity":"1"});
$('body').css({"overflow":"hidden"});
$('html').css({"overflow":"hidden"});
return false;
}
Displayed below is a screenshot highlighting the issue on the webpage: