diff --git a/src/directives/custom-animation.js b/src/directives/custom-animation.js
index cfd29d1..d810fd2 100644
--- a/src/directives/custom-animation.js
+++ b/src/directives/custom-animation.js
@@ -40,6 +40,7 @@ const T = {
 	rotateZ: 'rotate-z',
 	opacity_s: 'opacity-s',
 	opacity: 'opacity',
+	once: 'once',
 }
 const types = Object.values(T)
 const typesStr = types.map(v => `[${v}]`).join(',')
@@ -128,12 +129,16 @@ async function handleScroll({ target: root }) {
 		const item = els.get(el)
 		if (!item) return
 		if (!item.scroll) return
-		const children = el.querySelectorAll(typesStr)
+		const children = Array.from(el.querySelectorAll(typesStr))
+		if (Object.values(T).some(v => hasAttr(el, v))) children.push(el)
 		if (children.length === 0) return
 		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))		
+		const offsetHeight = root === document ? window.innerHeight : rootEl.offsetHeight
+		const offsetTop = rootEl.offsetTop
+		const scrollTop = rootEl.scrollTop
+		const elTop_bottom = offsetHeight - (el.offsetTop - offsetTop - rootEl.scrollTop)
+		const maxHeight = 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'