How to prevent body from scrolling with push-side menu

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



How to prevent body from scrolling with push-side menu



I am trying to properly implement a push-side menu plugin (Responsive Menu) into a wordpress theme. Based on SO @Congrim answer, I've managed to achieve a way to lock the body at scroll when push-menu is open (with all the elements including the header fixed) except the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light which will still go Up at push-menu open.


body


header


class=edge-ils edge-ils-with-scroll edge-ils-light



I've saved this sequence into congrim.js file, I've enqueued the script into the theme in functions.php file:


congrim.js


functions.php


function lockScroll()
if ($('body').hasClass('lock-scroll'))
$('body').removeClass('lock-scroll');

else
$('body').addClass('lock-scroll');




/* I've implemented `onclick="lockScroll();"` in button element,
* using this sequence in the same congrim.js file:
*/

$(document).ready(function()
$('#responsive-menu-pro-button').click(function()
lockScroll();
);
);



Removing the jQuery wrap will not give any error in browser console (tested in Chrome) may be still a bad approach to wrapp the code like this in wordpress (?)
In these conditions, unfortunately, overflow: hidden; doesn't apply, at push-side menu open, I can't use this class in CSS file/section:


overflow: hidden;


.lock-scroll
overflow: hidden;



The code will allow me to use only


.lock-scroll
position: fixed;



The question:

Is there any possibility to force the code to implement overflow: hidden;* OR any other a workaround in order to have the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light not going up at push-side menu open, to remain fixed at the position the viewer is clicked before opening the menu?


overflow: hidden;


class=edge-ils edge-ils-with-scroll edge-ils-light



Please focus on the interactive links issue only, the rest of the scene is fine (header and the logo are in place like it should be, the background pictures are acting like it should as well).


header


logo



LE: *overflow: hidden; it looks like will produce an unwanted body shifting effect at menu open/close, during the show/hide scrollbar, which is not happening in this stage.


overflow: hidden;


body



LE2: congrim.js file has been replaced with body-lock.min.js by Outsource WordPress, please see the solution below.


congrim.js


body-lock.min.js



Website testpage here.




3 Answers
3



Please check the solution given below.



Step 1: Add this CSS .scroll-lockposition:fixed !important;.


.scroll-lockposition:fixed !important;



Step 2: Add this JS.


$(document).ready(function()
var windowTop = 0;
var menuOpen = 0;
var offsetContainerList = 0;

$('#responsive-menu-pro-button').click(function()
var offsetScrollList = $('.edge-ils-item-link:first').offset().top;

if ($('html').hasClass('scroll-lock'))
$('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event)
if (menuOpen==0)
menuOpen = 1;
$('html').removeClass('scroll-lock');
$('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
$('html').scrollTop(windowTop); //scroll to original position

else
menuOpen = 0;

);

else
windowTop = $(window).scrollTop();
offsetContainerList = $('.edge-ils-content-table').offset().top;
$('html').addClass('scroll-lock');
$('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position

);
);



That's it!





Thank you SOOO much for this wonderful solution Sir, you're a Champ! It works like a charm, so smooth and nice. I really appreciate it, as much as others will appreciate this workaround for sure! All the best,
– typo_
Aug 19 at 7:53




Please add the below code in your custom js file .


jQuery('#responsive-menu-pro-button').click(function()
var menu_active = jQuery(this).hasClass('is-active');
if(menu_active)
jQuery('body').css('position','fixed');
else
jQuery('body').css('position','static');

);



I hope it helps you.



Thanks





Thank you, I've updated the congrim.js file, adding your sequence below the existing code. It looks like this will lock the body not on menu-open but on menu close. Please have a look. Did I've made something wrong? here is the file.
– typo_
Aug 18 at 11:44



congrim.js


body





Hello @typo_ please add only one code for lockScroll, remove all the reaming code in your file neuegrid.com/wp-content/themes/anders/assets/js/modules/plugins/…
– dineshkashera
Aug 18 at 12:14





remove all the code add test by using my code only, otherwise it will create problem.
– dineshkashera
Aug 18 at 12:14





see this link i have check with console drive.google.com/file/d/1R5EV1saMYjbTWpVjxhBlqiX3avt78Q40/view
– dineshkashera
Aug 18 at 12:20





Done! Should I add the line below the code as well jQuery.fn.init (...) ? or should I remove the .lock-scroll position: fixed; ? still not working Should I replace jQuery with $ ? (I know that's unusual for wordpress but I've managed to make other code work using $ instead of jQuery.
– typo_
Aug 18 at 13:01



.lock-scroll position: fixed;


jQuery


$


$


jQuery



Your scroll isn't a natural navigator-based scroll, you have a JS somewhere swapping classes to emulate a scroll (edge-appeared,edge-up,edge-down).


edge-appeared


edge-up


edge-down



On the push-side menu opening, these classes are reset, overflow-hidden won't change that.


overflow-hidden



You need to find which JavaScript is swapping those classes and prevent it from doing so, I'd be glad to be of further help but you have so many JS files that it would take quite some time to go through all of these. If you succeed in making a Minimal, Complete, and Verifiable example please post it here.





Thanks but for the same reason I am unable to do that (because there are a lot of files involved into that scene); more than that, as I already said, I'm not a coder, I have no knowledge to do that, compiling and taking the essence from all that files ... Thanks for passing by and for your time, anyway. I appreciate it,
– typo_
Aug 17 at 16:45





Maybe you can try asking the Responsive Menu support, it seems they already had this kind of issue here. Good luck !
– Nomis
Aug 18 at 0:57





I already had a discussion with @Peter Featherstone, but it looks like there are not much to do and I thought that there are people that had this issue and develop an solution; Thanks anyway.
– typo_
Aug 18 at 5:45






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more

Dynamically update html content plain JS

Image
Clash Royale CLAN TAG #URR8PPP Dynamically update html content plain JS So I have a script bound in my index.html, which literally has to fetch an array of jsons from an api, then dynamically update my page when get response. But as a result I'm getting an as the only update of my page. here is my script fetch(url) .then((resp) => resp.json()) .then((resp) => resp.results.forEach(item => fetch(item.url) .then((response)=> response.json()) .then((response) => pokeArr.push(response)) .catch(console.log) ) ).catch(console.log) const filler = () => if(!pokeArr) return 0 pokeArr.map((i,j)=> return `<tr>$i.name</tr>` ) const pokeindex = () => document.getElementById('a').appendChild(document.createElement(filler())) pokeindex() When I'm consoling it, I can see in the console all the responses I get, so I'm at least doing the fetching part right. What's parberakan ? What's pokeArr ? – T.J. Crowder Aug 8 at 12...
Read more

Creating a leaderboard in HTML/JS

Image
Clash Royale CLAN TAG #URR8PPP Creating a leaderboard in HTML/JS I'm trying to create a top 10 leaderboard, for now, I've only implemented 3 players, but I'm coming across an issue. My script doesn't seem to be outputting anything on webpage. The purpose of the script is to compare 3 arrays, player1,player2,and player3 solely based off of score. Which is the 2nd index of each array. I want the script to list the players in order of highest score. This method doesn't really seem to be efficient, especially when I'll have to add 7 more players. Could someone suggest perhaps an easier approach, as well as show me why my script wont output the info. Here's the JS function leaderboard() { var player1 = name:"Thomas",date:"01/23/18",score:"201"; var player2 = name:"Michael",date:"03/24/17",score:"943"; var player3 = Name:"Lisa",date:"06/04/18",Score:"79"; if(player1[2]...
Read more