Footer Nav content scrolling - how to retain horizontal scroll position

[touringkg]

Hi,

Using a footer nav bar menu with content scrolling links running off to the right of the canvas. Clicking on a nav bar link, the page reload will return the nav scroll bar position to the far left. Is it possible to retain the scroll bar position between page reloads?

I can see in the console that the style in div class=“ps-scrollbar-y-rail” style=“top: 0px; right: -xxxxpx;” changes as the nav bar is scrolled to the right but I’m new to JS - hope you can help.

[edit] After a lot of googling I’ve started with this code in the footer JS - thought it might be possible to replace the style settings for that div element on a page reload / new page (no idea what the correct hook is or if this approach would even work) but right now, sessionStorage returns undefined.

jQuery ( document ).ready ( function($) {
  var vScrollPos = jQuery("#ps-scrollbar-y-rail").css("right");
  if ( vScrollPos == '' || vScrollPos == '#' || vScrollPos == undefined ) return false;
  sessionStorage.scrollLeft = jQuery(vScrollPos);
});

I’ll send the WP URL and admin access in a secure note, thanks in advance

[thai]

Hi There,

I was unable to login with the provided account.

Could you please double check?

Thank you.

[touringkg]

Apologies Thai, pls try again

[nabeel]

Hi again,

You may try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	var get_scroll_position = localStorage.getItem("scroll_position");
	if($('footer .x-bar-scroll').length > 0) {
		$('footer .x-bar-scroll').scrollLeft(localStorage.getItem("scroll_position"));
	}
	$('footer .x-bar-scroll').on('scroll', function(){
		var scroll_position = $(this).scrollLeft();
		localStorage.setItem("scroll_position", scroll_position);
	});
});

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear your browser’s cache and purge the plugin’s cache after adding the code. Hope this helps!

[touringkg]

Hi Nabeel,

Installed the above code in the Global JS, I can see the scroll_position local storage value update while scrolling the nav bar and the value is retained when I click through to another page or reload a page. But the scroll bar position isn’t retained, it still resets to the default far left position?

[ruenel]

Hello There,

As Nabeel pointed out, the code may only serve as a guide for implementation of the code. This does not guarantee that it will work out for your site. He also pointed out that this is already a customization request as it goes beyond the default functionality of the footer scrollbars. It is best that you hire some who is an expert in jQuery to be able to fully accomplish the functionality that you have in mind.

Thank you for your understanding.