Svelte项目中如何随滚动逐步提升Logo透明度？

核心思路 #

通过监听浏览器滚动事件，根据当前垂直滚动距离动态计算Logo的透明度值，再将该值绑定到元素的opacity样式属性上。可以通过设定滚动阈值，控制透明度随滚动距离线性变化的节奏。

基础实现代码 #

<script>
  import { onMount } from 'svelte';
  
  // 初始透明度（0表示初始完全透明，可根据需求调整）
  let opacity = 0;
  // 滚动阈值：滚动到该距离时，透明度达到最大值1
  const maxScrollDistance = 200;

  function updateLogoOpacity() {
    // 获取当前垂直滚动距离
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    // 计算透明度：滚动距离/阈值，超过阈值则固定为1
    opacity = Math.min(scrollTop / maxScrollDistance, 1);
  }

  onMount(() => {
    // 组件挂载时添加滚动监听
    window.addEventListener('scroll', updateLogoOpacity);
    // 初始化触发一次，确保初始状态正确
    updateLogoOpacity();
    
    // 组件销毁时移除监听，避免内存泄漏
    return () => window.removeEventListener('scroll', updateLogoOpacity);
  });
</script>

<!-- Logo元素，绑定透明度样式 -->
<img src="/path/to/your/logo.png" alt="Site Logo" style="opacity: {opacity};" />

性能优化：添加防抖 #

滚动事件触发频率极高，容易导致不必要的页面重绘。添加防抖函数可减少计算频率，提升页面性能：

<script>
  import { onMount } from 'svelte';
  
  let opacity = 0;
  const maxScrollDistance = 200;
  let debounceTimer;

  function updateLogoOpacity() {
    clearTimeout(debounceTimer);
    // 10ms防抖延迟，可根据需求调整
    debounceTimer = setTimeout(() => {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      opacity = Math.min(scrollTop / maxScrollDistance, 1);
    }, 10);
  }

  onMount(() => {
    window.addEventListener('scroll', updateLogoOpacity);
    updateLogoOpacity();
    
    return () => {
      window.removeEventListener('scroll', updateLogoOpacity);
      clearTimeout(debounceTimer);
    };
  });
</script>

<img src="/path/to/your/logo.png" alt="Site Logo" style="opacity: {opacity};" />

SvelteKit 适配 #

在SvelteKit项目中，需注意服务器端渲染（SSR）时window对象不存在，需通过browser变量判断环境：

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  
  let opacity = 0;
  const maxScrollDistance = 200;
  let debounceTimer;

  function updateLogoOpacity() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      opacity = Math.min(scrollTop / maxScrollDistance, 1);
    }, 10);
  }

  onMount(() => {
    if (browser) {
      window.addEventListener('scroll', updateLogoOpacity);
      updateLogoOpacity();
      
      return () => {
        window.removeEventListener('scroll', updateLogoOpacity);
        clearTimeout(debounceTimer);
      };
    }
  });
</script>

<img src="/path/to/your/logo.png" alt="Site Logo" style="opacity: {opacity};" />

自定义调整 #

• 若需要向下滚动时Logo逐渐变透明（透明度降低），修改计算逻辑为：opacity = Math.max(1 - scrollTop / maxScrollDistance, 0)
• 调整maxScrollDistance的值可控制透明度变化快慢：值越小，变化越迅速；值越大，变化越平缓

内容的提问来源于stack exchange，提问作者Danny DOC