ScrollTo not work in firefox and IE

[proweb1991]

hi guys

i finally create onepage with scrollto plugin, but mousewheel has locked,

i searched about this problem , But could not find anything,

 

this is my sample website that doesn't work in ie and firefox : http://test164.iranrugco.com/

 

My Codes:

 var S, k, I, L = !1,
        C = $(".section1").height(),
        E = [0, 2 * C, 3 * C, 3 * C, 4400, C, 2 * C, C, C],
        N = 0,
        j = [];
    for (i = 0; i <= 8; i++) N += E[i], j[i] = N;
    $(window).bind("resize", function() {
        for ( C = $(".section1").height(), E = [0, 2 * C, 3 * C, 3 * C, 4400, C, 2 * C, C, C], N = 0, i = 0; i <= 8; i++) N += E[i], j[i] = N;
        S.update(!0), k.parallax("updateLayers")
    });
   function l() {
        F = 100
    }
	function c() {
        X = 0, F = 100
    }
	var D, B, Q,
        
        X = 0,
        F = 100;
	var $window = $(window);
	var $section = $("section");
	var scrollTime = 1.2;
	var scrollDistance = $window.height();
	 $(window).bind("mousewheel DOMMouseScroll wheel MozMousePixelScroll", function(a) {
        if ((a.preventDefault(), a.stopPropagation()), $(window).scrollTop() < j[3]) a.preventDefault(), a.stopPropagation();
        else {
            var o = navigator.userAgent.toLowerCase().indexOf("chrome") > -1,
                t = navigator.userAgent.toLowerCase().indexOf("windows") > -1;
            o && t && (Q = Math.abs(a.deltaY) / a.deltaY, "undefined" == typeof a.deltaY ? Q = X : X = Q, a.preventDefault(), a.stopPropagation(), setTimeout(l, 1000), F += 20, 120 == F ? TweenMax.to(window, .3, {
                scrollTo: {
                    y: $(window).scrollTop() - Q * F
                },
                ease: Quad.easeInOut,
                onComplete: c
            }) : TweenMax.to(window, .3, {
                scrollTo: {
                    y: $(window).scrollTop() - Q * F
                },
                ease: Quad.easeOut,
                onComplete: c
            }))
        }
    }) 

[Dipscom]

Hi proweb1991,

 

I had a look at your sample site but I don't understand what I should expect to happen. 

 

As you said, the mouse wheel is locked, there is some logs firing when you drag the scrollbar and use the arrow keys but there's nothing happening and no errors being thrown in any of the browsers I have tested, including Chrome.

 

The variables and function names you are showing here are single letters, making it hard for me to make sense what is what. I will see if I can work it out but can't promise much. Maybe someone else who has more experience with scroll-jacking might already know what needs to be done.

[Jonathan]

Hello proweb1991, and Welcome to the GreenSock Forum!

 

To me it looks like your script is blocking the default behavior with preventDefault() in your binded window event handler.

 

But your code isn't very readable and looks like more of a event binding issue than an issue with GSAP ScrollToPlugin.

 

You should add console.log to your script if and else and see what part of the if statement is firing.

 

And un-optimizing your code so the variable names are represented with meaningful names to help us better understand what you are doing.

 

A codepen demo would be better so we can test your code live.

 

 

Thanks!

[proweb1991]

Hi proweb1991,

 

I had a look at your sample site but I don't understand what I should expect to happen. 

 

As you said, the mouse wheel is locked, there is some logs firing when you drag the scrollbar and use the arrow keys but there's nothing happening and no errors being thrown in any of the browsers I have tested, including Chrome.

 

The variables and function names you are showing here are single letters, making it hard for me to make sense what is what. I will see if I can work it out but can't promise much. Maybe someone else who has more experience with scroll-jacking might already know what needs to be done.

thanks for your replies ... 

as you said previously  ,  My inspiration  is http://le-mugs.com/  and like this i want section by section scroll on each mousewheel event ... 

if you can look on my code and help me to finish this work , You have really a great help to me ..

thanks again

[proweb1991]

Hello proweb1991, and Welcome to the GreenSock Forum!

 

To me it looks like your script is blocking the default behavior with preventDefault() in your binded window event handler.

 

But your code isn't very readable and looks like more of a event binding issue than an issue with GSAP ScrollToPlugin.

 

You should add console.log to your script if and else and see what part of the if statement is firing.

 

And un-optimizing your code so the variable names are represented with meaningful names to help us better understand what you are doing.

 

A codepen demo would be better so we can test your code live.

 

 

Thanks!

Thank you  Jonathan for your welcoming

 

yes and sorry for my unreadable codes ... i want create onpage theme like http://le-mugs.com/  , i do every work , even create another sample for my musewheel event , but on each scroll It is possible that scroll  is not fit by sections And disorganization happens sections ...

see my 2th sample: http://test164.iranrugco.com/index2.html

 

this is my codes (This code is more readable) :   

$(document).ready(function(){
			var $window = $(window);
			var $section = $("section");
			var scrollTime = 1.2;
			var scrollDistance = $window.height();
			$(".section").css({"min-height":scrollDistance+"px"});
			$(".cd-floating-background").css({"height":scrollDistance+"px"});
			$(".section").on("mousewheel DOMMouseScroll", function(event){
			event.preventDefault();	event.stopPropagation()
			var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
			var scrollTop = $window.scrollTop();
			var finalScroll = scrollTop - parseInt(delta*scrollDistance);
			TweenMax.to($window, scrollTime, {
				scrollTo : { y: finalScroll, autoKill:false },
					ease: Power1.easeOut,
					overwrite: 5							
				});
			
			});
		});

thanks again for your reply dear friend ...

[Jonathan]

Ok, thank you for making your code readable

 

In that example the mousewheel is scrolling now.. pretty cool webpage.

 

[proweb1991]

Ok, thank you for making your code readable

 

In that example the mousewheel is scrolling now.. pretty cool webpage.

 

 

thanks,But the scroll is not working properly yet , mousewheel scroll ,  Sometimes more, sometimes less  than section  height  scrolled 

[Jonathan]

If you create a limited codepen demo example its easier to test your code live. 

 

[proweb1991]

Ok,i create a live demo in codepen and send and send url here... thx

[proweb1991]

If you create a limited codepen demo example its easier to test your code live. 

 

hi again

 

codepen:

See the Pen zoLpwy by proweb1991 (@proweb1991) on CodePen

 

in this demo if  the scroll wheel is rotated twice  or more times(Consecutive) ,one-page layout (show section by section on each mousewheel)

 will break down

how can fix it??