在 wordpress 中简易目录插件添加滑动条

实现思路

给目录容器添加一个 固定高度，并设置 CSS 的 overflow 属性 为 auto 或 scroll，使其内容可滚动。
确保目录的滚动行为独立于页面的整体滚动。
优化用户体验，添加平滑滚动效果。

操作步骤

1. 检查目录的 HTML 结构

首先，通过浏览器开发者工具（按 F12），查看插件生成的目录容器的 HTML 结构，找到其外层容器的类名或 ID。例如，假设插件生成的目录容器类似以下代码：

<div id="simple-toc" class="toc-wrapper">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
    </ul>
</div>

这里的外层容器为 <div id="simple-toc" class="toc-wrapper">。

2. 修改样式

编辑 WordPress 的 自定义 CSS（外观 > 自定义 > 额外 CSS），为目录容器设置独立滚动样式：

/* 设置目录容器的滚动效果 */
#simple-toc {
    max-height: 400px; /* 固定最大高度，具体值根据需要调整 */
    overflow-y: auto; /* 允许垂直滚动 */
    overflow-x: hidden; /* 禁止水平滚动 */
    border: 1px solid #ddd; /* 可选：为容器添加边框 */
    padding: 10px; /* 可选：容器内边距 */
}

/* 优化滚动条外观（仅支持现代浏览器） */
#simple-toc::-webkit-scrollbar {
    width: 8px;
}

#simple-toc::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

#simple-toc::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

3. 确保滚动行为独立

如果目录容器中的滚动事件未独立（例如，滚动到顶部或底部时继续触发页面滚动），可以通过 JavaScript 来防止冒泡：

在主题的 footer.php 或插件的 JS 文件中添加以下代码：

document.addEventListener('DOMContentLoaded', function () {
    const tocWrapper = document.querySelector('#simple-toc');

    if (tocWrapper) {
        // 阻止滚动事件冒泡
        tocWrapper.addEventListener('wheel', function (event) {
            const scrollTop = this.scrollTop;
            const scrollHeight = this.scrollHeight;
            const offsetHeight = this.offsetHeight;
            const delta = event.deltaY;

            if (
                (delta > 0 && scrollTop + offsetHeight >= scrollHeight) || // 到底部
                (delta < 0 && scrollTop <= 0) // 到顶部
            ) {
                event.preventDefault(); // 阻止默认行为
            }
        });
    }
});

保存并刷新页面，测试效果。

4. 验证功能

完成上述操作后：

打开有目录的页面。
如果目录内容超出设置的高度，则显示滚动条。
鼠标滚轮滚动目录时，目录区域的滚动行为与页面整体滚动分离。

可选优化

平滑滚动效果
如果希望目录项点击后页面滚动更加平滑，可以在目录生成的 a 标签点击事件中添加平滑滚动逻辑：

document.addEventListener('DOMContentLoaded', function () {
    const tocLinks = document.querySelectorAll('#simple-toc a');

    tocLinks.forEach(link => {
        link.addEventListener('click', function (event) {
            event.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const target = document.getElementById(targetId);

            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth', // 平滑滚动
                    block: 'start'
                });
            }
        });
    });
});

自定义滚动条样式（现代浏览器支持） 通过 CSS 添加更美观的滚动条样式，例如：

#simple-toc::-webkit-scrollbar {
    width: 10px;
}
#simple-toc::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#simple-toc::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
#simple-toc::-webkit-scrollbar-thumb:hover {
    background: #555;
}

通过上述方法，你可以让插件生成的目录支持鼠标滚轮单独翻动，且滚动体验流畅、美观。