Page not scrolling all the way to the bottom

Question

I have just added this code to my page:

<script>
$(window).on('load resize',function(){
   var maxHeight = -1;
   $('.specification-columns').each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });
   $('#specification').each(function() {
    $(this).height(maxHeight+24);
   });
 });
</script>

So that I can get the height of three divs, pick the tallest one and set the wrapper height to that. Since I put that code in, the page does not scroll all the way to the bottom, you can drag the scroll bar all the way to the bottom and it works fine but if you use a mouse wheel to scroll, it stops about 2/3 - 3/4 of the way down.

Here is the page: http://zimxtrial.ukbigbuy.com/#specification

Answer 1

I do not think that the mouse wheel scrolling problem is associated with this peice of code in particular. The issue is with one of the libraries that you are using.

May I suggest you use the chrome dev tools and javascript console to debug the code (either using breakpoints or console.log), but in any case, the code above looks like it should be just picking the max height from the 3 divs, as long as your html markup is correct and there are no further divs that have the same class/id.

By the way, I would suggest you avoid using Javascript to resize divs, it is a problem best left to CSS. This code will get hairy really quickly, specially with the miriad of devices/screen sizes on the market. So hardcoding things like "maxHeight+24" and so on, is a trap that will double your efforts later on.

---

Edit:

Remove the code that sets a height for the outer div. Your page works fine without a height set on the div, it takes the height of the tallest div anyway.

Upon closer inspection, it appears that your scroll wheel issue is coming from the bit of javascript at the head of your document. Namely where you initialise your smoothscroll script and you do this:

$(document).on("scroll", onScroll);

This calls the onScroll method when your scrolling, so I assume that your problem can be narrowed down to what happens within that function. Debug.

p.s. do some cross browser testing too, your page looks vastly different in the latest versions of Chrome and Firefox from what I can see.