Some Javascript/Jquery functionality gets enabled/disabled at 1140px


#1

I have encountered really strange behaviour while trying to include JS in my Blog.
Functions like “scrollTop” won’t work below viewport width of 1140px but they do work above 1140px. Why is this happening?

$('html, body').animate({scrollTop: '-=400px'}, 400);

Another example of how I need to improvise to make things work is following code.

// This code only works when window is smaller than 1140px
jQuery("body").on("scroll", function(e) {

});

// This only work for window greater than 1140px.
window.onscroll = function(e) {

};

Is this Hubspot behaviour or is this happening because of my own code? Does anyone have the same problem while designing a Blog template. It happens in the preview of the design itself (preview button) and in the real preview page (preview link)


#2

It turned out not to be a Hubspot bug. But the combination of css overflow-hidden on ‘body’ and ‘html’ tag and the wrong use of the scroll function.

  • remove the “overflow: hidden” from html, body
  • and use $(window).scroll( function(e) { } instead of any of the 2 functions in the question