diff --git a/css/about.css b/css/about.css index ac14217..a96f239 100644 --- a/css/about.css +++ b/css/about.css @@ -322,6 +322,7 @@ body { /* 确保不继承任何可能影响文字的滤镜或动画 */ filter: none; animation: none; + contain: layout style; } /* 黑夜模式下个人卡片发光效果 */ @@ -701,6 +702,7 @@ body { flex-direction: column; position: relative; overflow: hidden; + contain: layout style; } @@ -708,6 +710,7 @@ body { /* --- Interests --- */ .area-interests { padding: 20px; + contain: layout style; } @@ -1563,6 +1566,7 @@ body { text-align: center; /* 创建独立的层叠上下文,防止动画影响子元素 */ isolation: isolate; + contain: layout style; } /* 增强版呼吸动画:多层光晕 + 色彩流动 */ @@ -1982,6 +1986,7 @@ body { flex-direction: column; position: relative; overflow: hidden; + contain: layout style; } .card-header { @@ -2048,6 +2053,7 @@ body { text-decoration: none; pointer-events: none; /* 禁用鼠标事件避免干扰 */ z-index: 10; + contain: layout style; } /* 白天模式下为 tag-color 类增强可读性 */ @@ -2851,6 +2857,7 @@ body { text-decoration: none; pointer-events: none; z-index: 10; + contain: layout style; } /* Mobile Social */ diff --git a/css/artalk.css b/css/artalk.css index 4353522..095fec2 100644 --- a/css/artalk.css +++ b/css/artalk.css @@ -3,6 +3,7 @@ /* Base Artalk container styles */ #artalk-container { border-radius: 12px; + contain: layout style; } /* 确保评论区域适配白天/黑夜模式 */ diff --git a/js/about.js b/js/about.js index aae17d4..a9d75f3 100644 --- a/js/about.js +++ b/js/about.js @@ -962,8 +962,6 @@ class UIManager { const fMusic = document.getElementById('fab-music'); if (!main || !menu || !fLang || !fTheme || !fMusic) return; - // 添加拖拽功能 - this.initDraggableFab(); const updateLabels = () => { // 使用requestAnimationFrame避免强制重排 @@ -1012,73 +1010,6 @@ class UIManager { requestAnimationFrame(updateLabels); } - // 初始化拖拽功能 - initDraggableFab() { - const fab = document.querySelector('.mobile-fab'); - if (!fab) return; - - let isDragging = false; - let initialX, initialY, currentX, currentY, xOffset = 0, yOffset = 0; - fab.style.willChange = 'transform'; - - // 拖拽相关方法 - const setTranslate = (xPos, yPos, el) => { - el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`; - }; - - const dragStart = (e) => { - if (e.type === 'touchstart') { - initialX = e.touches[0].clientX - xOffset; - initialY = e.touches[0].clientY - yOffset; - } else { - initialX = e.clientX - xOffset; - initialY = e.clientY - yOffset; - } - isDragging = true; - }; - - const dragEnd = () => { - initialX = currentX; - initialY = currentY; - isDragging = false; - }; - - const drag = (e) => { - if (isDragging) { - e.preventDefault(); - if (e.type === 'touchmove') { - currentX = e.touches[0].clientX - initialX; - currentY = e.touches[0].clientY - initialY; - } else { - currentX = e.clientX - initialX; - currentY = e.clientY - initialY; - } - - // 使用requestAnimationFrame优化拖拽动画 - requestAnimationFrame(() => { - const ww = window.innerWidth; - const wh = window.innerHeight; - const rect = fab.getBoundingClientRect(); - const fw = rect.width; - const fh = rect.height; - currentX = Math.max(0, Math.min(currentX, ww - fw)); - currentY = Math.max(0, Math.min(currentY, wh - fh)); - - xOffset = currentX; - yOffset = currentY; - setTranslate(currentX, currentY, fab); - }); - } - }; - - // 绑定事件 - fab.addEventListener('touchstart', dragStart, { passive: false }); - fab.addEventListener('touchend', dragEnd, { passive: false }); - fab.addEventListener('touchmove', drag, { passive: false }); - fab.addEventListener('mousedown', dragStart, { passive: false }); - fab.addEventListener('mouseup', dragEnd, { passive: false }); - fab.addEventListener('mousemove', drag, { passive: false }); - } initAudio() { const el = document.getElementById('site-audio');