配合文本朗读，可以自动定位到当前播放块，用 AI 写的 JS 代码
// 首先，检查当前是否已经存在高亮的播放块，如果有则立即滚动到它
const scrollToHighlightedBlock = function() {
const currentPlayingBlock = document.querySelector('.p.tts-highlight');
if (currentPlayingBlock) {
currentPlayingBlock.scrollIntoView({
behavior: 'smooth', // 平滑滚动动画
block: 'center' // 垂直方向上将元素置于视口中央
});
console.log('已自动滚动到当前播放块');
}
};
// 初始检查一次
scrollToHighlightedBlock();
// 创建监听器，动态监测高亮块的出现
const observer = new MutationObserver(function(mutationsList) {
for (let mutation of mutationsList) {
// 检查是否是属性变化，特别是class属性的变化
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const targetElement = mutation.target;
// 判断变化的元素是否被加上了高亮类
if (targetElement.classList.contains('p') && targetElement.classList.contains('tts-highlight')) {
scrollToHighlightedBlock();
// 通常找到第一个高亮块后就可以跳出循环，但这里每个变化都会检查，所以没问题
}
}
}
});
// 启动监听器，配置为监听整个文档<body>内所有元素的属性变化
observer.observe(document.body, {
attributes: true, // 监听属性变化
subtree: true, // 监听所有后代节点而不仅是body的直接子节点
attributeFilter: ['class'] // 只监听class属性的变化，提高性能
});
// 可选：如果需要手动停止监听，可以执行 observer.disconnect();
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于