lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fixed where scrolling percent 0 does not hide

This commit is contained in:
XPoet 2021-01-25 11:12:01 +08:00
parent 2e1d34ba55
commit b7a0645751
2 changed files with 6 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
source/css/layout/_partial/side-tools.styl
View File

@ -95,20 +95,12 @@ $tools-item-border-radius = 1px;
display: flex; display: flex;
} }
} }
.arrow-up, .percent {
transition-t("display", "5", "0.2", "linear");
}
.arrow-up { .arrow-up {
display: none; display: none;
} }
.percent { .percent {
display: flex; display: flex;
font-size: 1rem; font-size: 1rem;

12
source/js/utils.js
View File

@ -26,23 +26,23 @@ KEEP.initUtils = () => {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
const clientHeight = window.innerHeight || document.documentElement.clientHeight; const clientHeight = window.innerHeight || document.documentElement.clientHeight;
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100);
if (this.isHasScrollProgressBar) { if (this.isHasScrollProgressBar) {
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3); const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
this.scrollProgressBar_dom.style.visibility = percent === '0' ? 'hidden' : 'visible'; this.scrollProgressBar_dom.style.visibility = percent === 0 ? 'hidden' : 'visible';
this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`; this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`;
} }
if (this.isHasScrollPercent) { if (this.isHasScrollPercent) {
const percent_dom = this.back2TopButton_dom.querySelector('.percent'); const percent_dom = this.back2TopButton_dom.querySelector('.percent');
if (percent === '0') { if (percent === 0 || percent === undefined) {
this.back2TopButton_dom.classList.remove('show');
} if (percent !== percent || !isFinite(percent)) {
this.back2TopButton_dom.classList.remove('show'); this.back2TopButton_dom.classList.remove('show');
} else { } else {
this.back2TopButton_dom.classList.add('show'); this.back2TopButton_dom.classList.add('show');
percent_dom.innerHTML = percent; percent_dom.innerHTML = percent.toFixed(0);
} }
} }