feat: add CSS scroll-state queries to ScrollToTop component

Author: danielroe

app/components/ScrollToTop.vue

@@ -6,8 +6,10 @@ const excludedRoutes = new Set(['index', 'code'])
 
 const isActive = computed(() => !excludedRoutes.has(route.name as string))
 
+const isMounted = ref(false)
 const isVisible = ref(false)
 const scrollThreshold = 300
+const supportsScrollStateQueries = ref(false)
 
 function onScroll() {
   isVisible.value = window.scrollY > scrollThreshold
@@ -18,8 +20,15 @@ function scrollToTop() {
 }
 
 onMounted(() => {
-  window.addEventListener('scroll', onScroll, { passive: true })
-  onScroll()
+  // Feature detect CSS scroll-state container queries (Chrome 133+)
+  supportsScrollStateQueries.value = CSS.supports('container-type', 'scroll-state')
+
+  if (!supportsScrollStateQueries.value) {
+    window.addEventListener('scroll', onScroll, { passive: true })
+    onScroll()
+  }
+
+  isMounted.value = true
 })
 
 onUnmounted(() => {
@@ -28,7 +37,20 @@ onUnmounted(() => {
 </script>
 
 <template>
+  <!-- When CSS scroll-state is supported, use CSS-only visibility -->
+  <button
+    v-if="isActive && supportsScrollStateQueries"
+    type="button"
+    class="scroll-to-top-css fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+    aria-label="Scroll to top"
+    @click="scrollToTop"
+  >
+    <span class="i-carbon-arrow-up w-5 h-5" aria-hidden="true" />
+  </button>
+
+  <!-- JS fallback for browsers without scroll-state support -->
   <Transition
+    v-else
     enter-active-class="transition-all duration-200"
     enter-from-class="opacity-0 translate-y-2"
     enter-to-class="opacity-100 translate-y-0"
@@ -37,7 +59,7 @@ onUnmounted(() => {
     leave-to-class="opacity-0 translate-y-2"
   >
     <button
-      v-if="isActive && isVisible"
+      v-if="isActive && isMounted && isVisible"
       type="button"
       class="fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
       aria-label="Scroll to top"
@@ -47,3 +69,28 @@ onUnmounted(() => {
     </button>
   </Transition>
 </template>
+
+<style scoped>
+/*
+ * CSS scroll-state container queries (Chrome 133+)
+ * Hide button by default, show when page can be scrolled up (user has scrolled down)
+ */
+@supports (container-type: scroll-state) {
+  .scroll-to-top-css {
+    opacity: 0;
+    transform: translateY(0.5rem);
+    pointer-events: none;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  @container scroll-state(scrollable: top) {
+    .scroll-to-top-css {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+  }
+}
+</style>