Issue
In main.css the min-height of the body is 5000px, when i scroll the page the scrollHeight and clientHeight gives me the same value which is (5000), here is my main.js, What is the wrong??
let el = document.querySelector(".scroller");
let height =
document.documentElement.scrollHeight - document.documentElement.clientHeight;
console.log(document.documentElement.scrollHeight);
console.log(document.documentElement.clientHeight);
console.log(height);
window.addEventListener("scroll", () => {
const scrollTop = document.documentElement.scrollTop;
el.style.width = `${(scrollTop / height) * 100}%`;
});
enter image description here
please help
Solution
According to this link: medium.com/@jbbpatel94/difference-between-offsetheight-clientheight-and-scrollheight-cfea5c196937
scrollHeight: The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar.
clientHeight: It includes the element’s padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after.
If the element's content can fit without a need for vertical scrollbar, its scrollHeight is equal toclientHeight.
So, in short, if the whole document doesn't require scrolling or a scroll bar, its scrollHeight is the same has the clientHeight.
Answered By - Splays
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.