搜索文本内容,出现滚动条后可实现滚动效果
搜索后,可实现向上向下,第一个,最后一个滚动
输入框中输入关键子,可在失去焦点后调用search() 方法,然后关键子就会被标记上class,
文本内容要定义两份,每次重新搜索不同内容要重新使用原本文本(旧的加过了class),页面内容超出出现滚动调后方可实现滚动功能
const search=(keyWords:any)=> {
state.checkIndex = 0;
let allNum = 0;
let regExp = new RegExp(keyWords, "g");
state.log = state.logL.replace(
regExp,
'<span class="result" style="background:yellow;color:red;">' +
keyWords +
"</span>"
);
scrollToLocation(state.checkIndex);
}
const next=()=> {
state.checkIndex++;
scrollToLocation(state.checkIndex);
}
const previous=()=> {
state.checkIndex--;
scrollToLocation(state.checkIndex);
}
const first=()=>{
scrollToLocation(0);
}
const last=()=>{
let mainContainer:any = document.querySelectorAll(".result");
scrollToLocation(mainContainer.length-1);
}
// 这里使用定时的原因是因为第一次跳转的时候 dom 还在渲染,不一定能获取到,所以需要利用定时器多次获取
const scrollToLocation=(checkIndex:any)=> {
setTimeout(() => {
let mainContainer:any = document.querySelectorAll(".result");
let search:any = document.querySelector("#search");
if(checkIndex>=0){
mainContainer[checkIndex].scrollIntoView();
// window.scrollTo({
// top:
// mainContainer[state.checkIndex].scrollTop - search.clientHeight,
// behavior: "smooth",
// });
console.log(mainContainer[checkIndex].offsetTop - search.clientHeight)
}
}, 300);
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库