Tips for stopping body content from scrolling and allowing off-canvas navigation to scroll when open

Incorporated a simple off-canvas navigation system as outlined in this guide: . However, encountering an issue where scrolling within the menu is not possible, particularly problematic on mobile devices in landscape mode when the menu extends beyond the visible screen.

Exploring ways to prevent scrolling of content inside the page-wrapper div while the navigation menu is open, allowing for scrolling within the off-canvas navigation without displaying a large scrollbar.

HTML:

<nav id="menu">
    <a href="#menu" class="menu-link"></a>
    <ul>
       <span><a href="#">Title</a></span>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">Blog</a></li>
    </ul>
</nav>

<div class="page-wrapper">
    Body Content Here
</div>

CSS:

#menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 13.755em;
    right: -13.755em;
    height: 100%;
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
}

#menu.active {
    -webkit-transform: translate(-13.755em, 0px);
    -moz-transform: translate(-13.755em, 0px);
    -o-transform: translate(-13.755em, 0px);
    -ms-transform: translate(-13.755em, 0px);
    transform: translate(-13.755em, 0px);
}

.page-wrapper {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: 0.15s ease;
    -moz-transition: 0.15s ease;
    -o-transition: 0.15s ease;
    transition: 0.15s ease;
}


.page-wrapper.active {
    -webkit-transform: translate(-13.725em, 0px);
    -moz-transform: translate(-13.725em, 0px);
    -o-transform: translate(-13.725em, 0px);
    -ms-transform: translate(-13.725em, 0px);
    transform: translate(-13.725em, 0px);
}

.menu-link {
    position: absolute;
    top: 15px;
    left: -50px;
}

Javascript:

$(".menu-link").click(function(){
    $("#menu").toggleClass("active");
    $(".page-wrapper").toggleClass("active");
});
javascriptjqueryhtmlcssnavigation

Answer №1

If you want a block level element to be able to scroll, simply apply overflow:auto; and adjust the height accordingly with height:100%;. To prevent scrolling on the main content area, there are various methods you can try out, such as extending the navigation to cover the width of the page or using an invisible element to block scrolling. You may also consider enabling or disabling scrolling on the body with a click event, and for optimal results, apply overflow:hidden; to both html and body to resolve any compatibility issues across browsers and iOS devices.

I hope this information offers some useful insights!

Answer №2

When the menu is opened, you can update your div container with these attributes:

.container.active{
 position:fixed;
 width:100%;
}

Alternatively,

.container.active{
    height:100%;
    overflow:hidden;
}

This was explained by @Shan Robertson.

Another option is to add a class with these attributes to prevent the main content from scrolling while the side nav is open.

Answer №3

There is no need to add any external code for this task. Simply input the code within the 'afterOpen' settings section like so: 'afterOpen': function() { $( "body" ).css( "overflow-y", "hidden" );

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

Validating input fields using jQuery in PHP

Hey there, I have created a school admission form in my application and I am facing some validation issues. Even after entering the correct information, it still shows an error message. Can someone please point out what mistake I might have made? Here is ...

phpjqueryvalidation

Modify the background's color and incorporate a pointlight using three.js

Recently, I have been exploring the capabilities of three.js. One interesting challenge I encountered was creating a cube within a wireframe cube. However, I found myself struggling to alter the background color in my project. I believe that incorporating ...

javascripthtmlcanvasthree.js

The element.find() function in Angular struggles to locate input elements nested within other elements

I have been working on a directive that has the following template (simplified): <table> <tr> <td> <input type="text"/> </td> <td> <inpu ...

javascriptangularjselement

Managing responses from ajax requests that can handle both text and json formats

After submitting a form via Ajax and receiving a response from the servlet in either text or JSON format, I'm wondering if there is a way to handle both types of responses. I've read through the jQuery/Ajax documentation, but the JQuery Ajax page ...

javascriptjqueryajax

Stop hyperlinks from automatically opening in a new tab or window

I'm having trouble with my website links opening in new tabs. Even after changing the attributes to _self, it still doesn't work. Can someone please review my code below and provide a solution? Feel free to ask for more clarification if needed. ...

javascripthtmlcss

Display a list of items in Angular using ng-repeat, and allow the full description to appear in full width

<div ng-controller = "MyController"> <ul class="items" > <div ng-repeat="item in colors" ng-class="{active:isActive(item)}" ng-click="select(item); whattoshow=!whattoshow"> <li class="col-md-3 col-sm-3 col-lg-3 co ...

javascripthtmlangularjs

Missing index in the GET variable

I have a div with the class .excelDL. When this div is clicked, a form is submitted using AJAX without refreshing the page, and it works perfectly fine. However, the issue I am facing is that I need to check if $_GET['excel'] has been set to one ...

javascriptjqueryajax

Automatically redirect to the linked page once the video concludes

Would it be feasible for a html5 video to trigger the opening of a new page upon completion? What would be the approach to achieve this using javascript? ...

javascripthtml

An error occurred during the bundling process in React Native

I recently started using react-native and encountered a perplexing error that I cannot quite figure out. My goal is to integrate a calendar library into my project: https://github.com/wix/react-native-calendars I have added the necessary dependency for t ...

javascriptiosreactjsreact-nativenpm

Adding Currency Symbol to Tooltip Data in Material-UI Sparklinechart

Below is a SparklineChart example using MUI library: import * as React from 'react'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import { SparkLineChart } from '@mui/x-charts/SparkLineCha ...

javascriptreactjsmaterial-uimui-x-charts

A dark strip appears beneath an image when it is clicked in HTML and CSS styling

Problem: Whenever the logo is clicked, a black bar appears below it in both Firefox and Chrome. Holding down on the logo makes the black bar stay. Below are some of the attempts made to remove the black bar when focused on: a:active, a:focus { outline: ...

htmlcsswordpress

Error in Next.js 13 due to Prisma table mapping causing hydration issues

I recently created a basic project in Next.js 13 and encountered a Hydration Error even though my project is not doing much. The code snippet below seems to be the cause of the issue: import { PrismaClient } from "@prisma/client"; export default ...

javascriptnext.jsprisma

Tips for concealing the background HDR map display in three.js without compromising the HDRI's contribution to the lighting effects

In my code, I have implemented the following example: Source: https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_gltf.html#L53 While HDRI lighting works perfectly, I am struggling to hide the HDR map from the background. Is there a way ...

javascriptphpthree.jshdr

Stop the React timer count for a moment

I am currently attempting to implement a pause feature in a countdown timer using React. Here is the code snippet: export default function Home() { const timerRef = useRef(180) const [minute, setMinute] = useState(3) const [second, setSecond] = useS ...

javascriptreactjsnext.js

Each page in NextJS has a nearly identical JavaScript bundle size

After using NextJS for a considerable amount of time, I finally decided to take a closer look at the build folder and the console output when the build process is successful. To my surprise, I noticed something peculiar during one of these inspections. In ...

javascripttypescriptwebpackbabeljsnext.js

Form Input: Retrieve Exclusive Value Using Identical Name and ID

I have successfully executed a query and displayed the results on my address page using PHP and AJAX. <div id="address-wrap"> <div id="report-address">3719 COCOPLUM CIR <br> Unit: 3548<br> COCONUT CREEK, FL 33063</div> <di ...

javascriptajaxformsmobile

Enhanced tagging functionality in Knockout v3 with Chosen Multiselect

Recently, I have been expanding the functionality of a selected library by implementing an on-the-fly tagging feature using knockout observables to store the selected values. However, I have encountered some issues along the way. I am hopeful that someone ...

jqueryknockout.jstwitter-bootstrap-3jquery-chosen

Apply the class to only the particular child element when hovered over, without impacting any other divs that share the same

Currently, I have a grid of images set up using bootstrap. When hovering over the images, they enlarge slightly and change opacity. However, this effect applies to all the icons in the grid. While I understand that giving each icon its own ID could fix thi ...

jqueryparent-childjquery-hover

Implement a style to all elements except for the special element

Learn HTML <ul id="tree"> <li> <label> <input type="checkbox" /> Level 1 - 1</label> </li> <li> <label> <input type="checkbox" /> Level 1 - 2</lab ...

jquerycss

Creating a scrollable panel using CSS is easy with a solid border and a panel element

Using Vaadin to design my front-end, I encountered an issue where adding border-style:solid to the style.css file resulted in a scrollable v-panel. How can I retain the solid style while removing the scrolling feature? Please refer to the screenshot for cl ...

cssformborderstyle