移动端断点加载后放大窗口，环形滚动旋转文本失效问题求助

为什么会出现这个问题？ #

我之前也碰到过类似的场景，核心问题出在初始化时机上：当页面在宽度小于768px的移动端状态下加载时，.circular-text被CSS设置为display: none，此时你的.contact-text元素没有实际的布局尺寸（甚至可以说没被渲染到可视DOM中）。而你只在document.ready时执行了一次CircleType(text).radius(40)初始化——这时候CircleType根本拿不到元素的正确尺寸，自然生成不了有效的环形文本布局。后续即使你把窗口放大到桌面端，初始化代码也不会自动重新执行，所以环形文本就失效了。

修复方案 #

我们需要把环形文本的初始化逻辑封装成可复用的函数，同时监听窗口的resize事件，在窗口宽度跨越768px断点时重新初始化（或销毁）环形文本，再加上防抖处理避免频繁触发。

修改后的JavaScript代码

jQuery(document).ready(function($) {
  let circleTypeInstance = null;
  const textEl = document.querySelector(".circular-text .contact-text");
  
  // 封装环形文本的初始化/销毁逻辑
  function toggleCircularText() {
    const isDesktop = window.innerWidth >= 768;
    
    if (isDesktop && textEl && !circleTypeInstance) {
      // 桌面端：先确保元素可见，再初始化环形文本
      textEl.parentElement.style.display = 'block';
      circleTypeInstance = new CircleType(textEl).radius(40);
      // 绑定滚动旋转事件
      window.addEventListener("scroll", handleScroll);
    } else if (!isDesktop && circleTypeInstance) {
      // 移动端：销毁实例、移除滚动监听、隐藏元素
      circleTypeInstance.destroy();
      circleTypeInstance = null;
      window.removeEventListener("scroll", handleScroll);
      textEl.parentElement.style.display = 'none';
    }
  }
  
  // 滚动时的旋转处理函数
  function handleScroll() {
    if (circleTypeInstance) {
      textEl.style.transform = `rotate(${window.scrollY * 0.15}deg)`;
    }
  }
  
  // 防抖函数：避免resize事件频繁触发，提升性能
  function debounce(func, delay = 200) {
    let timer;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  }
  
  // 页面加载时先执行一次初始化逻辑
  toggleCircularText();
  
  // 监听窗口尺寸变化，防抖执行切换逻辑
  window.addEventListener("resize", debounce(toggleCircularText));
});

优化后的CSS（合并重复的媒体查询）

html, body { height: 1000px; }
.circular-text{
  position: fixed;
  bottom: 20px;
  right: 68px;
  z-index: 9999;
}
.contact-text{
  font-family: "Alliance No 2";
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  color: #fb4d98;
}

/* 合并移动端样式，避免重复定义 */
@media screen and (max-width:767px) {
  .circular-text{
    bottom: -10px;
    right: 39px;
    display: none;
  }
}

关键修改点说明 #

1. 状态化管理实例：用circleTypeInstance变量记录环形文本实例，避免重复初始化和重复绑定滚动事件。
2. 断点切换逻辑：在窗口跨越768px断点时，自动执行初始化或销毁操作，适配不同屏幕尺寸。
3. 防抖处理：给resize事件加防抖，避免窗口拖动时频繁触发逻辑，减少不必要的性能消耗。
4. 资源清理：切换到移动端时主动销毁实例并移除滚动监听，避免占用不必要的浏览器资源。

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