搜索文本内容,出现滚动条后可实现滚动效果

搜索后,可实现向上向下,第一个,最后一个滚动

输入框中输入关键子,可在失去焦点后调用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);
        }
posted @   婷baby  阅读(151)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示