ctrl + f 功能，锚点定位加滚定条触底操作

月照一江秋水

已于 2022-04-25 15:53:35 修改

阅读量343

点赞数 1

分类专栏： JS 文章标签： javascript

于 2022-03-02 11:38:11 首次发布

本文链接：https://blog.csdn.net/qq_41206597/article/details/123226385

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

ctrl + f 功能问题太多目前只实现了个简陋版本后面有时间在写吧

`ctrl + f 功能目前只实现了大部分文字的搜索 暂未检测出bug 满足我这边的最低需求 `>文字< 搜索` 对于第三方的UI组件 像设置的label名称也是可以搜索的`

demo 预览

锚点定位参考: https://blog.csdn.net/learn8more/article/details/108047794

问题：window.scorllby 是相对与body的且body且为当前窗口的高度需要为height：auto 否则无法触发滚动条事件，导致scrollby滚动定位失效，

使用非window.scorllby方法，推荐自定义内容设置为

  #content {
    height: calc(100vh - 78px);
    overflow-y: auto;
  }

获取当前定义dom参数进行触底操作（获取到的值在不同电脑笔记本可能会有小数点误差记得四舍五入）

  let scrollTop = document.getElementById('content').scrollTop;
  let clientHeight = document.getElementById('content').clientHeight;
  let scrollHeight = document.getElementById('content').scrollHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log('滚动到底部了');
  }