Smooth Scroll – issue

Hello!

Problem in plugin GP Premium.

Script https://www.luca.eu/wp-content/plugins/gp-premium/general/js/smooth-scroll.js overrided internal function window.scroll (https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll). This results in an error.

Try contacting to GP Premium plugin support.

Thank you LuckyWP, I have the same error. Are you sure the problem is from GP Premium?

@promostudio Yes. window.scroll is browser function and override him – is very bad practice. I think developers of GP Premium should fix this.

Hello Lucky, Tom from GeneratePress asks for this:

We’re using window.scrollTo in our javascript. Did they offer any insight as to why this would be conflicting with their javascript?

Thanks!

• This reply was modified 4 years, 10 months ago by Fernando García.

See end of file https://www.luca.eu/wp-content/plugins/gp-premium/general/js/smooth-scroll.js

/* GP */
var scroll = new SmoothScroll( ...

This code overrided window.scroll function.

I use Generatepress premium version on all my websites aswell, I have the same issue! This is really frustrating…

Tom, the Lead Developer of Generatepress just replied to me with this message:

Tom, Lead Developer “Generatepress”

• This reply was modified 4 years, 10 months ago by milodz.

Hello @milodz !

Problem not in originl Smooth Scroll script. See this: https://github.com/cferdinandi/smooth-scroll/blob/master/dist/smooth-scroll.js

There is no “/* GP */ var scroll = new SmoothScroll( …` in this code.

This code added GP developers to this file: https://www.luca.eu/wp-content/plugins/gp-premium/general/js/smooth-scroll.js (see end of file). The problem is in the code that the GP developers added.

Here is Tom’s replay for your last post here

” That line is how you initiate the smooth scroll library.

If there’s something specific in that block of code causing a conflict, we would need more information. All it’s doing is initializing the smooth scroll library and sorting out the necessary offset for sticky navigations.”

This is really annoying…I just want my problem gets fixed!

Hello!

I created video: https://www.youtube.com/watch?v=NVs-Xi2ZrrU
I hope this will help GP developers understand their mistake.

They overrided internal function window.scroll: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll.

Here is Tom’s replay

” I understand, but I’m not seeing what the conflict is, which makes it impossible to fix.

Our smooth scroll feature is 100% optional, so you can turn it off if it’s conflicting on your website. There are other options available: https://www.ads-software.com/plugins/jquery-smooth-scroll/ “

I’m very upset that the GP developers don’t want to fix their bug. Instead, they suggest disabling the option ??

In that case I can’t help you any more ??

• This reply was modified 4 years, 10 months ago by LuckyWP.

Hi there,

GP developer here.

Thanks for the video – very useful. It confirms that the incompatibility is with the smooth scroll library itself. You can run the same test in the console on their demo (no GP at all): https://codepen.io/cferdinandi/pen/wQzrdM

It may be worth reporting to them, as it’s a very popular script.

Of course, we’ll be happy to update the script in our plugin if they’re able to fix it.

Thanks!

LuckyWP, please report the issue. I have 10 websites under GP premium all of them have the same problem…This is really frustrating.

• This reply was modified 4 years, 10 months ago by milodz.

Hello, @edge22 !

Problem not in Smooth Scroll script.

Bug this: var scroll = ...

For fix need rename variable “scroll”. For exmaple: var gpscroll = ...

If you don’t use variable “scroll” ion your code, then best solution will be remove variable. Instead

/* GP */
var scroll = new SmoothScroll( smooth.elements.join(), {
	speed: smooth.duration,
	offset: function( anchor, toggle ) {
		var body = document.body,
			nav = document.querySelector( '#site-navigation' ),
			stickyNav = document.querySelector( '#sticky-navigation' ),
			mobileHeader = document.querySelector( '#mobile-header' ),
			menuToggle = document.querySelector( '.menu-toggle' ),
			offset = 0;

		if ( mobileHeader && ( mobileHeader.offsetWidth || mobileHeader.offsetHeight || mobileHeader.getClientRects().length ) ) {
			if ( body.classList.contains( 'mobile-header-sticky' ) ) {
				offset = offset + mobileHeader.clientHeight;
			}
		} else if ( menuToggle && ( menuToggle.offsetWidth || menuToggle.offsetHeight || menuToggle.getClientRects().length ) ) {
			if ( body.classList.contains( 'both-sticky-menu' ) || body.classList.contains( 'mobile-sticky-menu' ) ) {
				if ( stickyNav ) {
					offset = offset + stickyNav.clientHeight;
				} else if ( nav ) {
					offset = offset + nav.clientHeight;
				}
			}
		} else if ( body.classList.contains( 'both-sticky-menu' ) || body.classList.contains( 'desktop-sticky-menu' ) ) {
			if ( stickyNav ) {
				offset = offset + stickyNav.clientHeight;
			} else if ( nav ) {
				offset = offset + nav.clientHeight;
			}
		}

		return offset;
	}
} );

Make this:

/* GP */
new SmoothScroll( smooth.elements.join(), {
	speed: smooth.duration,
	offset: function( anchor, toggle ) {
		var body = document.body,
			nav = document.querySelector( '#site-navigation' ),
			stickyNav = document.querySelector( '#sticky-navigation' ),
			mobileHeader = document.querySelector( '#mobile-header' ),
			menuToggle = document.querySelector( '.menu-toggle' ),
			offset = 0;

		if ( mobileHeader && ( mobileHeader.offsetWidth || mobileHeader.offsetHeight || mobileHeader.getClientRects().length ) ) {
			if ( body.classList.contains( 'mobile-header-sticky' ) ) {
				offset = offset + mobileHeader.clientHeight;
			}
		} else if ( menuToggle && ( menuToggle.offsetWidth || menuToggle.offsetHeight || menuToggle.getClientRects().length ) ) {
			if ( body.classList.contains( 'both-sticky-menu' ) || body.classList.contains( 'mobile-sticky-menu' ) ) {
				if ( stickyNav ) {
					offset = offset + stickyNav.clientHeight;
				} else if ( nav ) {
					offset = offset + nav.clientHeight;
				}
			}
		} else if ( body.classList.contains( 'both-sticky-menu' ) || body.classList.contains( 'desktop-sticky-menu' ) ) {
			if ( stickyNav ) {
				offset = offset + stickyNav.clientHeight;
			} else if ( nav ) {
				offset = offset + nav.clientHeight;
			}
		}

		return offset;
	}
} );

• This reply was modified 4 years, 9 months ago by LuckyWP.