Background scrolling in the responsive devices

The body in the background should be fixed if the toggle menu, off canvas menu, popup view or mini cart widget is visible. Could you please let us know any java script for such or does theme setting have such option.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

html:has(.wd-side-hidden.wd-opened) {
	overflow: hidden;
}

Please check how it works.

Best Regards

Unfortunately, the above code did not work. I have attached the screen recording.

Attachments:

You must be logged in to view attached files.

Hello,

We have checked and we see no scroll on mobile devices in your site: https://monosnap.com/file/NKUZxBja7vbH5mQS9TWFdbeK7DFsIa

The mobile devices usually do not have any scroll by their nature. The content is swapped there with the sliding sidebar.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

I have checked the website in iPhone and Samsung Galaxy S20 Ultra. Still I can see the background scroll is happening. Mobile devices have tap features that let users swipe from top to bottom.

For your convenience, I have created a video by using Firefox to look into vividly. That is exactly happening when an user click quick view/Mini Cart or Off canvas menu.

I look forward to hearing from you.

Kind regards,
Satya

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the delay.

Please add this code to the Theme Settings > Custom JS > on Document ready:

var closeSide = document.querySelector('.wd-close-side');

if ( closeSide && window.innerWidth < 768 ) {
	var observer = new MutationObserver((changes) => {
		if(changes[0].attributeName.includes('class')) {
			if(closeSide.classList.contains('wd-close-side-opened')) {
				document.querySelector('html').style.setProperty('overflow-y', 'hidden')
			} else if(! closeSide.classList.contains('wd-close-side-opened')) {
				document.querySelector('html').style.removeProperty('overflow-y')
			}
		}
	});
	observer.observe(closeSide, {attributes : true});
}

Best Regards

Thank you Elise, I will upload the script and get back to you as soon as I can.

Hello,

Sure!

If you have any questions please feel free to contact us.

Best Regards

[spnutratea]

Thank you

Regards,
SP

• This reply was modified 1 year, 7 months ago by spnutratea.

Hello,

Have you already tested?

Best Regards

After implementing the above script Canvas mobile menu and Mini Cart Widget does not have background scrolling. However, when we click the eye icon (QuickView), background scrolling is there.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 1024px) {

	.mfp-wrap.quick-view-wrapper {
		position: fixed !important;
		overflow-y: scroll;
		max-height: 100vh !important;
		top: 0 !important;
		bottom: 0 !important;
	}
}

Please add this code to the Theme Settings > Custom JS on Document ready:

(function($) {
	$(document).on('wdQuickViewOpen', function() {
		$.magnificPopup.instance.st.callbacks.close = function() {
			document.querySelector('html').style.removeProperty('overflow-y')
		}

		document.querySelector('html').style.setProperty('overflow-y', 'hidden')
	});
})(jQuery);

Best Regards

I have implemented new style and script as mentioned above. The old scripts has been removed from Theme Settings > Custom JS on Document ready:. Please advice.

Regards
SP

Hello,

You need to add all the code to the Theme Settings > Custom JS > On Document ready.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,
Thank you for your guidance. Could you please verify the below said code is correct?

Theme Settings > Custom JS > On Document ready:

(function($) {
$(document).on(‘wdQuickViewOpen’, function() {
$.magnificPopup.instance.st.callbacks.close = function() {
document.querySelector(‘html’).style.removeProperty(‘overflow-y’)
}

document.querySelector(‘html’).style.setProperty(‘overflow-y’, ‘hidden’)
});
})(jQuery);

var closeSide = document.querySelector(‘.wd-close-side’);

if ( closeSide && window.innerWidth < 768 ) {
var observer = new MutationObserver((changes) => {
if(changes[0].attributeName.includes(‘class’)) {
if(closeSide.classList.contains(‘wd-close-side-opened’)) {
document.querySelector(‘html’).style.setProperty(‘overflow-y’, ‘hidden’)
} else if(! closeSide.classList.contains(‘wd-close-side-opened’)) {
document.querySelector(‘html’).style.removeProperty(‘overflow-y’)
}
}
});
observer.observe(closeSide, {attributes : true});
}

Theme Settings > Custom CSS > Global:

@media (max-width: 1024px) {

.mfp-wrap.quick-view-wrapper {
position: fixed !important;
overflow-y: scroll;
max-height: 100vh !important;
top: 0 !important;
bottom: 0 !important;
}
}

Regards,
SP

Hi Elise

I have an another serious issue, I believe you are the best person who can help us with it. Once this is sorted we are ready to go live: https://xtemos.com/forums/topic/minicart-widget-issue/

The delay and disappearance of Payment Gateways in MiniCart widget.

Regards,
SP

Hello,

We will send the information in this topic: https://xtemos.com/forums/topic/minicart-widget-issue/

Best Regards

Thank you.

You are welcome!

Wish you a wonderful day!

[Author]

Posts