Skip to content

Odd over-scroll behavior

Cameron Gilbert

So we have this website, and when you scroll all the way down to the bottom it keeps scrolling.

I’ve tried lots of ways to fix this and haven’t come across a valid solution.

It seems to be adding margin outside of the main <html> tag.

Any help would be greatly appreciated

Only custom JS added:

if (document.getElementById("tab1")) {
document.getElementById("tab1").style.display = "flex";
document.getElementsByClassName("tablinks")[0].className += " active";
}
var durl = String(document.URL);

if (durl.indexOf("#") != -1) {
durl = durl.substring(durl.indexOf("#") + 1,durl.length);
  openTab(event, durl);
}

function openTab(evt, name) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(name).style.display = "flex";
if (evt == undefined) {
  document.getElementsByClassName(durl)[0].className += " active";
  setTimeout(function() {
    window.scroll(0, document.getElementsByClassName("tab")[0].offsetTop)
  }, 1000);
} else {
  evt.currentTarget.className += " active";
}
  }

Advertisement

Answer

Here’s the answer to the problem:

Any and all images were being applied translate3d and on scroll it was calculating the following: transform: translate3d(0px, <insert current scroll position>px, 0px);

This was causing the page to overflow on itself and was caused by an included libs.min.js package.

What I did to fix this issue was replace <insert current scroll position> with 0 where it was being called.

Also a hidden div called .search had transform translateY(-25px) and an ::after pseudo class that had a height of 100vh, removal of this fixed the problem

Thank you all for the help