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