Navigate through the overlay's content by scrolling

Objective:
Looking to implement a scroll feature for long content.

Issue:
Not sure how to create a scroll that allows users to navigate through lengthy content.

Thank you!

function openNav() {
    document.getElementById("myNav").style.height = "100%";
    
     $('body').addClass('noscroll');   
}

function closeNav() {
    document.getElementById("myNav").style.height = "0%";
    
     $('body').removeClass('noscroll');
    
}
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.8);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
   position: relative;
   top: 10%;
   width: 70%;
   text-align: left;
   margin: 30px auto;
   background: white;
  overflow-y: scroll;
  
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}


.noscroll { 
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">CANDY</a>    
  </div>
</div>

<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide downwards from the top:</p>
  
...and so on...

javascriptjqueryhtmlcss

Answer №1

To ensure your overlay content displays correctly, you should set a specific height and change the overflow property to 'auto' for better visibility of the scrollbar only when necessary:

.overlay-content {
    overflow-y: auto;
    height: 100%;
}

Here's the modified code snippet:

function openNav() {
    document.getElementById("myNav").style.height = "100%";
    
     $('body').addClass('noscroll');   
}

function closeNav() {
    document.getElementById("myNav").style.height = "0%";
    
     $('body').removeClass('noscroll');
    
}
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.8);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
   position: relative;
   top: 10%;
   width: 70%;
   text-align: left;
   margin: 30px auto;
   background: white;
   overflow-y: auto;
   height: 100%;     
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}


.noscroll { 
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">CANDY</a>    
  </div>
</div>

<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide downwards from the top:</p>
  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>    
<br/>  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>    
<br/>  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>    
<br/>  
<br/>  
<br/>  
<br/>  
<br/>  
<br/>

Answer №2

Include dimension

.modal-content {
    width: 50%;
}

Answer №3

Height is key in this situation:

.content-overlay {
    height: 70vh;
}

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

There seems to be an issue with the functionality of Array.filter when trying to use it with arrays

I am facing an issue with filtering branchId from an Array. Here is the code snippet and steps I have taken. const [branchID,setBranchID]=React.useState([]); const tempTwo=[ { branchId: "61b25e0ae177d62ce4cb3b47", bra ...

javascriptarraysreactjsobject

The Best Way to Refresh a ReactJS Component in Plain HTML/JavaScript

So here's the situation. I'm diving into creating a React Modal component that can seamlessly integrate with any vanilla HTML / JS file. By generating a bundle.js file using Webpack from my React component, it becomes easier to inject it into a d ...

javascriptjqueryhtmlreactjsdom

Retrieve the id and value attributes of a checkbox using the success callback function in jQuery AJAX

I'm currently working on a web application project using JSP, jQuery, AJAX, MySQL, and Servlet. Within my project, I have a table.jsp file structured as follows: <form id="frm_table"> Username : <input type="text" id="txt_name" name= ...

jqueryajaxjson

Step-by-step guide on replacing Express API routes with React Router

I am currently working on an application that utilizes React Routes and is served with an Express server. The Express server also contains routes for API calls. Server.js const express = require('express') const path = require('path') ...

javascriptreactjsexpress

Modifying the height of the bar in Google Charts Timeline using react-google-charts

I am currently working on a Google Chart timeline using react-google-charts. <Chart chartType="Timeline" data={data} width="100%" options={{ allowHtml: true bar: { groupWidth: 10 }, }} ...

javascriptreactjschartsgoogle-visualizationreact-google-charts

Problem with displaying Django input fieldsSolution for missing Django input

Currently, I am in the process of constructing a website using Django. One of my tasks involves transferring input from index.html to about.html through view.py. However, despite successfully passing the input as seen in the URL in the browser's addre ...

pythonhtmldjangopython-3.x

How do I create more space in Vitepress to prevent the text from feeling cramped and allow it to display in a larger area?

Below is the content of my index.md file: --- # https://vitepress.dev/reference/default-theme-home-page layout: home hero: name: "TP2" text: "Analyzing the code of TP2 by Breno Mazzali Medeiros Tomazelli and Philippe Bouchard" ta ...

htmlcssvue.jsvitepress

Simple guide on how to use AJAX (without jQuery) and PHP to count the number of records

As a novice programmer, I am attempting to tally the number of records in a table. Despite perusing various code snippets, I am unable to seamlessly integrate them to pass the PHP result to my javascript code. Here is the current state of my code: showsca ...

javascriptphphtmlajax

Tips on implementing CSS to the subpar class in Vuejs

I am working on an HTML file that operates with button in Vue.js. The v-bind:class can be utilized for a single tag as shown below. It disappears based on the boolean value of bool data. <h3 v-bind:class="{active: bool}">{{counter.document}}&l ...

javascripthtmlcssvue.js

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

htmlcssreactjs

Utilizing HTML list elements in conjunction with a switch statement, and connecting the list directly to a database for

Hey there, I'm interested in learning how to access HTML elements and use them within switch statements. <div id="hori"> <ul> <li><a href="#">Aerospace</a></li> <li><a href="#">Automotive</a>< ...

htmljspmenuswitch-statement

Implementing an HTML5 Media Player with AngularJs via the $http Service

HTML View <audio ng-src="{{vm.videourlsce}}" autoplay preload="auto" controls="controls" autobuffer></audio> Retrieve data from a server in my controller using the $http service and update it to the player. var vm = this; vm.videourlsce = &a ...

angularjshtmlaudiohtml5-audio

PHP + MySQL + JavaScript for an Interactive Web Communication Platform

My goal is to develop a Web Chat system using PHP, MySQL, and JavaScript. Currently, I store messages in a MySQL database with an incremental ID (indexed), timestamp, sender, and message. To retrieve new messages, I use AJAX to query the database every 50 ...

phpjavascriptmysqlajax

Making an HTTP request within a forEach function in Angular2

Encountering an issue while using the forEach function with HTTP requests. The _watchlistElements variable contains the following data: [{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890" ...

javascriptangularasynchronousxmlhttprequest

Column Locking with Merged Rows

I have implemented row spanning in jqgrid by following the instructions provided in this answer: Jqgrid - grouping row level data However, I am facing an issue where setting a column with row span to frozen = true causes the overlay to lose the row spanni ...

javascriptjqgrid

Tips on adding background images to your chart's background

Is there a way to set an image as the background in Lightning Chart using chartXY.setChartBackground? ...

javascriptlightningchart

What steps are needed to link my Javascript application with Amazon Keyspaces?

I am a beginner looking for assistance with extracting data from Amazon keyspaces tables on a small demo website with 4 categories and 4 subcategories. I have created the tables but can't find a tutorial, please help. The goal is to display database ...

javascriptvisual-studio-codecassandraamazon-keyspacesdatastax-node-driver

Having trouble retrieving the Rest Post response using Jquery Ajax post request

When I make a Rest call using the Ajax post method, I encounter the following error or response: {"readyState":0,"status":0,"statusText":"error"} I have enabled cors ($.support.cors = true;) and crossDomain (crossDomain: true (added in headers)). Here ...

javajqueryajaxweb-servicesrest

Transferring JSON data using DWR (Direct Web Remoting)

Utilizing DWR for AJAX calls in my project involves the conversion of JavaScript objects to Java objects by analyzing the Java class. My goal is to send and receive a JSON-like structure through DWR. For example: JavaScript Object: { "name" : "TamilVe ...

javajavascriptjsondwr

Rendering EJS templates and smoothly scrolling to a specific section on a webpage

I need to display my index page and automatically scroll down to the form section. One way I thought of doing this is by: app.post('/rsvp', (req, res) => { res.render('index/#rsvp', { errors: { email: 'Your email has already ...

htmlnode.jsexpressejs