动画

src/directives/custom-animation.js

@@ -87,7 +87,7 @@ function add(el, root = document) {
 		obj.observer.observe(el)
 		return
 	}
-	resize.observe(root)
+	resize.observe(isDocumentRoot(root))
 	root.addEventListener('scroll', handleScroll)
 	const observer = new IntersectionObserver((entries) => {
 		entries.forEach((entry) => {
@@ -112,7 +112,7 @@ function remove(el, root = document) {
 	}
 	if (obj.els.length === 0) {
 		obj.observer.disconnect()
-		resize.unobserve(root)
+		resize.unobserve(isDocumentRoot(root))
 		root.removeEventListener('scroll', handleScroll)
 		roots.delete(root)
 	}
@@ -130,9 +130,10 @@ async function handleScroll({ target: root }) {
 		if (!item.scroll) return
 		const children = el.querySelectorAll(typesStr)
 		if (children.length === 0) return
-		const elTop_bottom = root.offsetHeight - (el.offsetTop - root.offsetTop - root.scrollTop)
-		const maxHeight = root.offsetHeight + el.offsetHeight
-		const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight))
+		const rootEl = isDocumentRoot(root)
+		const elTop_bottom = rootEl.offsetHeight - (el.offsetTop - rootEl.offsetTop - rootEl.scrollTop)
+		const maxHeight = rootEl.offsetHeight + el.offsetHeight
+		const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight))		
 		children.forEach((item) => {
 			item.style.transition = 'transform 0.5s ease-out'
 
@@ -165,4 +166,8 @@ function hasAttr(el, attr) {
 	} else {
 		return el.hasAttribute(attr)
 	}
-}
+}
+// 检查document是否为根元素
+function isDocumentRoot(root) {
+	return root === document ? document.documentElement : root
+}