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

Creating a Vue Directive in the form of an ES6 class: A step-by-step

Is it possible to make a Vue directive as an ES6 Class? I have been attempting to do so, but it doesn't seem to be working correctly. Here is my code snippet: import { DirectiveOptions } from 'vue'; interface WfmCarriageDirectiveModel { ...

javascripttypescriptvue.jses6-class

Angular.js image slider display for viewing photos

Exploring the possibility of incorporating an open source widget to showcase images on a webpage, specifically leveraging angular.js. After conducting a search query on Google for "Angular.js photo carousel" or "angular.js photo viewer," I discovered only ...

javascriptangularjs

I am experiencing issues with my HTML select list not functioning properly when utilizing a POST service

When using Angularjs to automatically populate a list with *ngFor and then implementing a POST service, the list stops functioning properly and only displays the default option. <select id="descripSel" (change)="selectDescrip()" > <option >S ...

htmlangulartypescript

Alter the color of H3 when clicked and then gently fade it back

Is it possible to create a button on the top of my webpage that scrolls to a specific DIV when clicked, and also have it change the color of an h3 element once it has scrolled to it? This effect is similar to how Facebook highlights notifications. This is ...

jquerycssjquery-animate

Is there a way to verify the presence of a specific word within a classname?

My goal is to verify if the string ("Pre laminated ") matches the css class name I am checking. I only need confirmation of whether the given word is present in the classname: Output "pass" if it exists, output "fail" if it does not. ...

javacssseleniumclassname

What is the best way to create a seamless background transition for buttons on a mobile device?

Currently, I am working on my random quote generator project and I am trying to make it so that when the button is touched on a mobile device, the background color becomes semi-transparent. Below is the code I am using: #loadQuote { position: fixed; w ...

htmlcssfrontend

Utilize range slider to refine dataset

I have implemented a jquery datatable along with the range.slider plugin. My goal is to apply the range slider to filter out data in the last column. In my attempt, I am using search.push to accomplish this filtering process. Below is an example of my i ...

javascriptjquerydatatable

When implementing the Dropdown Picker, it is important to avoid nesting VirtualizedLists inside plain ScrollViews for optimal

Currently, I am utilizing the RN library react-native-dropdown-picker. However, when I enclose this component within a ScrollView, it triggers a warning: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because ...

javascriptreactjsreact-nativescrollviewdropdown

"Customizing FusionCharts: A step-by-step guide to changing the background color

Is there a way to modify the background color of fusionchart from white to black? Additionally, how can I change the font color in the chart? ...

javascriptangularjsfusioncharts

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

htmlcssreactjsmaterial-ui

Pay attention to the input field once the hidden attribute is toggled off

In attempting to shift my attention to the input element following a click on the edit button, I designed the code below. The purpose of the edit is to change the hidden attribute to false. Here's what I attempted: editMyLink(i, currentState) { ...

htmljqueryangulartypescript

lint-staged executes various commands based on the specific folder

Within my project folder, I have organized the structure with two subfolders: frontend and backend to contain their respective codebases. Here is how the root folder is set up: - backend - package.json - other backend code files - frontend - p ...

javascripttypescriptlint-staged

How to align 3 buttons in a div using CSS

My design has 3 buttons that I want to always remain centered on the page, but they seem to skew off-center as the window widens (as shown in the image). What HTML/CSS code can I use to ensure that these buttons are perfectly centralized at all times? It ...

htmlcss

Steps to enable navigation to external pages from a ReactJS app

I am working on a simple ReactJS application: [Demo] [Source] I am trying to implement navigation within the app from external sources without refreshing the web page. This functionality should be similar to using this.props.history.push(...). /public/i ...

javascriptjqueryreactjsreact-routerreact-router-dom

ExpressJS: How to resolve the undefined error in Express session

After using express-generator to create my project, I installed the express-session package. Below is how express-session is ordered in my app: app.js var expressSession = require('express-session'); app.use(logger('dev')); app.use( ...

javascriptnode.jsexpresssession

How can I include a nested object in an ng-repeat loop in Angular?

I'm new to using Angular so please excuse my basic question. Here is the structure of my model for posts and comments: [ { "title": "awesome post", "desc": "asdf", "comment_set": [ { "id": 2, ...

javascriptangularjsangular-module

Problem with AJAX/HTTP communication

Looking for a solution to update link text dynamically based on tag count using AJAX? Take a look at this code snippet: <%= link_to "#{(@video.topics.count == 0) ? 'Add descriptive topics so people can find your song!' : 'Edit Topics&apo ...

ruby-on-railsrubyajaxruby-on-rails-3jquery

AssistanceBubble.js with ASP.NET UpdatePanel

Looking for guidance on implementing HelpBalloon.js () within an ASP.NET UpdatePanel. Experiencing issues with image loss after a postback. ...

asp.netjavascriptajax

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg

What are some methods for transferring the state variable's value from one component to another in React?

I have the following scenario in my code: there is a Form.js component that interacts with an API, stores the response in the walletAssets state variable, and now I want to create a separate Display.js component to present this data. How can I pass the v ...

javascriptreactjscomponents