Scrolling is Choppy on Mobile Pages When Navigation Javascript is Included in Footer

[leckerman]

Hello,

Looking for some help! We currently have javascript embedded into the footer of a Custom HTML module on all of our website page templates that makes the navigation work properly, however when you view these pages on mobile it is very choppy to scoll down.

On landing pages that don't need a top nav, the javascript can be removed from the footer and those pages have a smooth glide on mobile when you stroke up. 

Any idea what in this javascript is making that happen and is there any way to fix it so our pages with navigation are viewed more easliy on mobile? Let me know if you need further context. Thank you for your help!

<script>
/*-------------------------------------------------------------------------------*/
/* MOBILE NAV - TOGGLE SIDE MENU
/*-------------------------------------------------------------------------------*/
$(function() {

// Prepend a mobile icon to the header
$(".custom-menu-primary").after('<a class="mobile-icon"><span></span></a>');

// Prepend a close icon to the menu
$(".custom-menu-primary .hs-menu-flow-horizontal>ul").before('<a class="close-icon"><span></span></a>');

// Add body class on mobile icon click
$(".mobile-icon, .close-icon").click(function(){
$("body").toggleClass("show-mobile-nav ");
});

// Dropdown sub menu
$(
".hs-menu-depth-1.hs-item-has-children"
).not(".active-branch:nth-child(2)").click(function() {
$(this).toggleClass("drop");
$(this).find("> ul").toggle();
});

// Set the menu height to 100% of the document
function setMenuHeight(){
var height = $(document).outerHeight(true);
$(".custom-menu-primary").height(height);
}
setMenuHeight();

// Wrap body contents with a div so the transforms will work
$('body> div').find('script:not(script[type="IN/Share"])').remove().end().wrapAll('<div id="site-wrapper"></div>');

});

</script>

[MarkArch]

Including this to the css for every page worked well for me.   

html {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}

Only include this for mobile screen sizes as the overflow-y will give you 2 scroll bars when using desktop sized monitors. 

[leckerman]

Awesome @MarkArch! This just made my day! That fixed the scolling issue in mobile.

One other question for you, it looks like when you scroll to the bottom of a page in mobile there is a bunch of extra white space added under the footer now. Is there a way to remove that so that the footer is the bottom of the page? 

Example: http://www.alignex.com

[Anonymous]

Hi @leckerman,

Can you share the page or preview link? It would be easier to solve the issue from that. 

From what I have understood from the script, its mostly happening because of setting the Height for the Menu.

[leckerman]

Hello again @Anonymous,

Any idea on how the Navigation Javascript is effecting my mobile scolling issue? That same javascript is also preventing my smooth scroll anchor buttons in hero banner images from working in mobile. Before I added a navigation they were working fine. There is something in that javascript that effecting both now. 

Below is an event website I am working on that I am trying to fix ASAP. Any help would be GREATLY appreciated! Again, the javascript emdedded in a custom HTML module on the template that makes the navagation work is causing the scrolling in mobile to be choppy and also prevents smooth scolling javascript buttons to jump down to anchors from working. 

http://www.alignex.com/mechfuse-2017

[leckerman]

Hi @Anonymous,

Here is an example of one of our website pages that has the javascript embeded in the footer - http://www.alignex.com/3d-cad

And here is an example of a landing page that doesn't have top navigation and the javascript is removed from the footer in the template - http://www.alignex.com/subscribe-blog

If you view them on mobile, you can see how one is choppy and the other glides when you swipe up. Thank you for taking a look!