mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-09-13 06:40:20 +00:00
Replace Anime.js scrolling with native APIs (#981)
This commit is contained in:
parent
d54ab89ea2
commit
1b306b9824
@ -1,4 +1,4 @@
|
||||
/* global CONFIG */
|
||||
/* global NexT, CONFIG */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
'use strict';
|
||||
@ -13,12 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// If the page opens with a specific hash, just jump out
|
||||
if (!isNaN(top) && location.hash === '') {
|
||||
// Auto scroll to the position
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 200,
|
||||
easing : 'linear',
|
||||
scrollTop: top
|
||||
});
|
||||
NexT.utils.scrollTo(window, top);
|
||||
}
|
||||
};
|
||||
// Register everything
|
||||
|
||||
@ -19,6 +19,17 @@ HTMLElement.prototype.wrap = function(wrapper) {
|
||||
|
||||
NexT.utils = {
|
||||
|
||||
scrollTo(target, top) {
|
||||
if (window.CSS?.supports('scroll-behavior', 'smooth')) {
|
||||
target.scrollTo({
|
||||
top,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} else {
|
||||
target.scrollTo(0, top);
|
||||
}
|
||||
},
|
||||
|
||||
registerExtURL() {
|
||||
document.querySelectorAll('span.exturl').forEach(element => {
|
||||
const link = document.createElement('a');
|
||||
@ -193,12 +204,7 @@ NexT.utils = {
|
||||
}, { passive: true });
|
||||
|
||||
backToTop?.addEventListener('click', () => {
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 500,
|
||||
easing : 'linear',
|
||||
scrollTop: 0
|
||||
});
|
||||
NexT.utils.scrollTo(window, 0);
|
||||
});
|
||||
},
|
||||
|
||||
@ -258,12 +264,7 @@ NexT.utils = {
|
||||
}, 1000);
|
||||
if (!CONFIG.stickytabs) return;
|
||||
const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 500,
|
||||
easing : 'linear',
|
||||
scrollTop: offset
|
||||
});
|
||||
NexT.utils.scrollTo(window, offset);
|
||||
});
|
||||
});
|
||||
|
||||
@ -311,15 +312,8 @@ NexT.utils = {
|
||||
element.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const offset = target.getBoundingClientRect().top + window.scrollY;
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 500,
|
||||
easing : 'linear',
|
||||
scrollTop: offset,
|
||||
complete : () => {
|
||||
history.pushState(null, document.title, element.href);
|
||||
}
|
||||
});
|
||||
NexT.utils.scrollTo(window, offset);
|
||||
history.pushState(null, document.title, element.href);
|
||||
});
|
||||
return target;
|
||||
});
|
||||
@ -367,12 +361,7 @@ NexT.utils = {
|
||||
// Scrolling to center active TOC element if TOC content is taller then viewport.
|
||||
const tocElement = document.querySelector(CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini' ? '.sidebar-panel-container' : '.sidebar');
|
||||
if (!document.querySelector('.sidebar-toc-active')) return;
|
||||
window.anime({
|
||||
targets : tocElement,
|
||||
duration : 200,
|
||||
easing : 'linear',
|
||||
scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
|
||||
});
|
||||
NexT.utils.scrollTo(tocElement, tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top);
|
||||
},
|
||||
|
||||
updateSidebarPosition() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user