Issue
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";
}
}
Solution
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
Answered By - Cameron Gilbert
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.