ScrollTop returns a much smaller div value in firefox

Question

Hi guys, First of all, if this is a duplicate, please bear with me, since any similar questions like me have not been answered.

Link Link: http://old.crazyripples.com/?debug=1

So, I am using jQuery and the jQuery fullPage plugin. This helps me get the frame scrolling.

Now, for internal divs where the vertical height is greater than the height of the window, I used some functions where I just check the position of the scroll bar and stopPropagation on the plugin so that the inner scroll bar scrolls without shifting the frame.

Everything works fine with chrome, and since I built with chrome, I used some calculations that I observed on chrome. But firefox shows different results, especially with scrollTop .

I am aware that the difference may be different, but if you see the logs in the link, you will see that the height is almost the same (even if it is not for you, its scrollTop value, which is the problem).

Here is the code that I use to decide whether to stop Propagation or not.

$(document).on("keydown",function(e){ var story=$("#story"), story_con=story.find(".container"), story_top=story_con.scrollTop(); if(story.hasClass("active")){ // console.log(story_top,story_con.height(),story_con.innerHeight(),story_con.children("div").height(),story_con.children("div").innerHeight(),e.which); console.log("Div ScrollTop: "+story_top, "Container Height: "+story_con.height(), "Container InnerHeeight: "+story_con.innerHeight(),"Conatiner Div Height: "+story_con.children("div").height()); //up arrow if(story_top==0 && e.which==38){ console.log("prev frame") } //down arrow //chrome 280+432 >= 676 ie 712>=676 true //firefox 207+429 >= 676 ie 636>=676 false else if(story_top + story_con.height() >=story_con.children("div").height() && e.which==40){ console.log("next frame"); } else{ story_con.focus(); console.log(story_con[0]); console.log("stopped propagation"); e.stopImmediatePropagation(); } return; } }); 

And this is how I call the plugin:

 $('#main').fullpage({ sectionSelector:'.frame', scrollingSpeed:800, responsiveWidth:1025, normalScrollElements: '#story, #startups, #services', }); 

Replication: Go to the link link. Scroll to the second section (Our History) by scrolling, arrow keys, or menus. Now use the arrow keys, the frame should scroll in normal mode, but when the scroll is complete, it should go to the next frame (this is done in Chrome). See js logs for more details.

I would love it if someone could help me. I tried to debug this for a while. Maybe I'm focusing on the wrong question? Any help would be appreciated.

PS I know that the plugin offers the scrollOverflow option. This caused more problems than this approach.

Update:. Since I could not find any solution so specific, I changed my approach to detection when the scroll frame of the frame reached the end. I used this:

 //down arrow else if(container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight){ console.log("next frame"); } 

Answer 1

* This is the beginning of my answer as I continue to debug to give you more details.

Currently, using Firefox version 49.0.1 for window sizes smaller than 1280 pixels, your content inside your container classes is too high.

Current Proof: In your #story , #story , #partners and #services , if you want to give a div , which is a direct descendant of div.container in each of the main sections a height: 200px , all your down arrow keys will work.

Edit 1 On line magic.js 111 your problem begins.

else if(story_top + story_con.height() >=story_con.children("div").height() && e.which==40){

The content in each of your containers, story_con.children("div").height() , is sometimes larger than story_top + story_con.height() , so it does not go to the path of the next page you want.

Of course, it all depends on the height of the window.

Your debug log proves my point:

Answer 2

The simple answer would be that Chrome and Firefox render pages differently. To understand why you get rendering differences, see Explanation

I hope this clears.