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

实现思路

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

---

操作步骤

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 来防止冒泡：

1. 在主题的 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(); // 阻止默认行为}});}
});

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

---

4. 验证功能

完成上述操作后：

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

---

可选优化

1. 平滑滚动效果
   如果希望目录项点击后页面滚动更加平滑，可以在目录生成的 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'});}});});
});

1. 自定义滚动条样式（现代浏览器支持） 通过 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;
}

---

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