Halo 评论区表情框被遮挡

解决方案

网上发现没有 twikoo 的解决方案，就照着改了个 twikoo 的版本，原理是直接把表情框弹出位置改到上方，就不会再被遮挡。

在后台 设置 -> 代码注入 -> 页脚 加入以下代码：

<script>
    // Twikoo 表情面板位置修复
    function initTwikooEmojiPositionFix() {
        const emojiButton = document.querySelector('.tk-submit-action-icon.OwO');

        if (!emojiButton) {
            setTimeout(initTwikooEmojiPositionFix, 1000);
            return;
        }

        // 添加自定义样式
        const style = document.createElement('style');
        style.textContent = `
            .OwO-body {
                position: absolute !important;
                bottom: 100% !important;
                top: auto !important;
                left: 0 !important;
                margin-bottom: 10px !important;
                z-index: 9999 !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
                border-radius: 8px !important;
            }
            
            .tk-submit-action-icon.OwO {
                position: relative !important;
            }
            
            /* 确保表情面板不会超出屏幕边界 */
            @media (max-width: 768px) {
                .OwO-body {
                    left: 50% !important;
                    transform: translateX(-50%) !important;
                    width: 300px !important;
                    max-width: 90vw !important;
                }
            }
        `;

        // 避免重复添加样式
        if (!document.querySelector('#twikoo-emoji-fix-style')) {
            style.id = 'twikoo-emoji-fix-style';
            document.head.appendChild(style);
        }

        // 监听表情按钮点击
        emojiButton.addEventListener('click', function (e) {

            // 延迟执行以确保面板已经显示
            setTimeout(() => {
                const emojiPanel = document.querySelector('.OwO-body');
                if (emojiPanel) {
                    // 强制应用位置样式
                    emojiPanel.style.cssText += `
                        position: absolute !important;
                        bottom: 100% !important;
                        top: auto !important;
                        left: 0 !important;
                        margin-bottom: 10px !important;
                        z-index: 9999 !important;
                    `;

                    // 检查是否超出屏幕边界并调整
                    const rect = emojiPanel.getBoundingClientRect();
                    if (rect.left < 0) {
                        emojiPanel.style.left = '0px';
                    } else if (rect.right > window.innerWidth) {
                        emojiPanel.style.left = 'auto';
                        emojiPanel.style.right = '0px';
                    }
                }
            }, 100);
        });

        // 监听点击外部区域关闭面板时的处理
        document.addEventListener('click', function (e) {
            const emojiPanel = document.querySelector('.OwO-body');
            if (emojiPanel && !emojiButton.contains(e.target) && !emojiPanel.contains(e.target)) {
                // 面板即将关闭，可以在这里做一些清理工作
            }
        });

        console.log("Twikoo 表情位置修复脚本已初始化");
    }

    // 初始化函数
    function initScript() {
        // 等待 Twikoo 完全加载
        if (typeof window.twikoo !== 'undefined' || document.querySelector('.twikoo')) {
            initTwikooEmojiPositionFix();
        } else {
            setTimeout(initScript, 500);
        }
    }

    // 多种方式确保脚本正确初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initScript);
    } else {
        initScript();
    }

    // 支持 PJAX
    document.addEventListener('pjax:complete', initScript);

    // 支持其他路由切换方式
    window.addEventListener('load', initScript);
</script>