The overflow hidden function does not seem to be fully functional on the iPad

Struggling to prevent body scrolling when a modal pop-up appears? I've tried setting the body overflow to hidden when opening the modal and resetting it when closing, which worked fine on desktop browsers. However, mobile devices like iPod/iPhone posed a challenge. To address this, I included

-webkit-overflow-scrolling: touch;

But even this solution didn't work on iPad. Here's my code:

function toggleMenu() {
if (!toggle) {
$("body").css("overflow", "hidden");
}else{
$("body").css("overflow", "");
}
toggle = !toggle;

Despite exploring various solutions on Stack Overflow and experimenting with position fixed, nothing seems to resolve the issue specifically on iPod. Any help or suggestions would be greatly appreciated. Thank you.

javascriptjqueryhtmlcssipad

Answer №1

check out this solution

Optimizing IPad display in portrait and landscape modes

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
body{overflow:hidden;}
}

Answer №2

Give this a try:

body.modal-open {
    overflow: hidden;
    position: fixed;
    height: 100%;
}

Note that using the above code may cause the page to scroll to the top.

If you want the scroll position to remain after closing the modal, you can implement additional handling like the following.

var scrollPosition;

function onOpenModal(){
    scrollPosition = $('body').scrollTop();
    $('body').css("position", "fixed");
};

function onCloseModal(){
    $('body').css("position", "static");
    $('body').animate({"scrollTop": scrollPosition}, 0);
});

Answer №3

If you're modifying CSS arguments, remember to include curly braces {}. For example:

$("header").css("background-color", "blue");

Should be changed to:

$("header").css({
   "background-color" : "blue"
});

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

Utilizing Vanilla JavaScript to retrieve information from a HTML table

I am currently running my website on XAMPP and I have a database connection set up that I can use. In my database, I have three drop-down menus labeled Translations, Books, and Chapters where the data for each is stored. My goal is to utilize Vanilla JS ...

javascriptmysqlexpress

How can you achieve a smooth transition effect using a combination of jquery, php sessions, and automatically refreshing the page

I am in search of a smooth transition effect for a dynamic user layout system that I have developed. My layout is dependent on a session having either the value 1 or 2, and then I call the layout using a switch statement. switch ($_SESSION['layout&a ...

phpjqueryajax

How to use jQuery to extract a JSON snippet from a lengthy string

I received an AJAX response in the form of a lengthy string, which includes HTML and JSON data. The JSON object is embedded within the string and not always at the end. My goal is to extract the JSON object from the string so that I can utilize it with th ...

javascriptjqueryjson

Exploring the possibilities of node-webkit: node-odbc encounters a setback

Currently, I'm in the process of developing a desktop application utilizing node-webkit. The main functionality of the app involves querying an Oracle database. To establish the connection with the database, I have integrated node-odbc. To ensure tha ...

javascriptnode.jsoraclenode-webkitnode-odbc

Navigating to an AngularJS state through an email hyperlink

Trying to guide users from an email link to a specific state within my Angular app presents a challenge due to its single page nature, making direct URL redirection impossible. Past attempts involved utilizing URL parameters: The email includes this link ...

javascriptangularjsemailhttp-redirect

Recording JavaScript Cookie Visit Counts and Tracking Last Login Dates

I am a beginner in JavaScript and cookies, and I am attempting to create a cookie that can show the number of times someone has visited a website, the date of their last visit, and the expiration date of the cookie. Initially, I tried modifying code from ...

javascriptcookiesvisitor-pattern

How can I align a sub-submenu horizontally using CSS?

I've built a nested menu using the ul/li tags, and I'm looking to align the second and third sub-menus horizontally with the first submenu. Here is my current visual layout: https://i.sstatic.net/4TctL.png, and this is what I want it to look lik ...

htmlcss

Tips on conducting a statistical analysis without having to wait for the completion of an AJAX response

I am looking to track the number of clicks on a specific div with the id #counter and then redirect the user to a different website. To achieve this, I have implemented an ajax call on the click event of the #counter div. Upon successful completion of the ...

javascriptphpjqueryajaxhttp-redirect

"Yakov's slender typefaces are appearing incorrectly on the screen

I recently tried to incorporate Yakov thin fonts using CSS @font-face, but I noticed that the fonts appear quite different from the original ones. Any idea why this might be happening? Below is the code snippet I used: @font-face { font-family:' ...

htmlcssfont-faceembedded-fonts

$injector.modulerr problem

After spending a considerable amount of time analyzing every line of code, I can't seem to pinpoint any errors. Here is what I have: HTML: <body ng-app='myApp'> <div class="wrapper"> <nav> <ul ng-controller="pat ...

javascriptangularjsfrontendngroute

Grab images from clipboard, encountering blob Error

I'm having issues with copying and pasting images from the clipboard in Chrome. Can someone help me troubleshoot this error? Check out this js fiddle for reference Error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileR ...

javascriptjqueryhtmlclipboard

Customizing the appearance of a date input field by passing an object with Vue.js

I created a dynamic table using Vuejs, where each cell contains an input element set as readOnly initially. The table also includes an 'edit' button for each row, which, when clicked, changes to 'save' and allows editing of the input el ...

javascriptvue.jsvuejs2

Tips on deleting a section of text inside a div

I have a DataTables implementation that is displaying an input inside a label element like this: <label> Search: <input type="search" class="" placeholder="" aria-controls="example"> </label> My goal is to remove the "Search:" t ...

jqueryhtmldatatables

Transferring information from an HTML form to a C# webservice through AJAX

I've created a form in HTML using Bootstrap within PHPStorm, and now I want to send the information to a C# webservice using AJAX. However, I'm unsure about what to include in the AJAX URL section (shown below). Here is the HTML/Bootstrap form I ...

c#jqueryhtmlajaxweb-services

The JSON data structure is not being maintained

I am facing an issue with updating the json object model values using the code below. Even after changing the values, it seems like the model is not getting updated. I tried removing the async code and that worked. Why does the async code not work in this ...

javascriptnode.js

Is it possible to retrieve a variable from a geojson file using Vue 3 and Vite?

For my Vue 3 project, I am trying to import a variable from a geojson file. However, when I use import line from '@static/line.geojson', my page goes blank and it seems like Vue stops working. If I use import line from '@static/line.json&ap ...

javascriptjsonvue.jsvuejs3geojson

Approach to dividing PHP output into multiple outputs (AJAX, PHP) (nested AJAX requests, AJAX inside AJAX loop?)

Seeking advice on how to efficiently handle PHP output in small chunks for AJAX responseText. The project involves a webpage using AJAX to input a last name, which is then processed by a PHP program. The PHP code randomly selects three people with differen ...

phpjavascriptajax

Don't pay attention to CSS that is outside of the div

Currently, I am attempting to populate a div with templates in order to preview them. These templates are sourced from a database and configured using php. My issue lies in the fact that certain entries consist of entire websites (complete with a head and ...

htmlcss

Include the script tags retrieved from an array

I'm exploring the idea of dynamically adding JavaScript to the DOM using an array and a loop. The goal is to load each script sequentially, starting with scripts[0], then scripts[1], and so on. var myScripts = [["external", "https://code.jquery.com/j ...

javascript

Converting Milliseconds to a Date using JavaScript

I have been facing a challenge with converting milliseconds data into date format. Despite trying various methods, I found that the solution provided in this link only works for a limited range of milliseconds values and fails for higher values. My goal is ...

javascripthtmldatedatetime