JS 实现滚动定位和点击button跳转

2021-10-25 15:06:40 阅读：195 来源： 互联网

标签：const dom currentId button JS key 跳转 scrollTop

最近在开发项目的时候，有一个交互上的需求，就是滚动内容区域的不同模块，要高亮显示上方模块对应的button，用到的是react+TS开发的项目，具体的代码如下：

1.滚动定位到具体的tab

下面的方法是关键的一个方法，就是获取一组button具体对应的id

/**
 * 设置第二个tab的active的key
 * scrollTop + clientHeight == scrollHeight，说明滚动到最底部了，把值设置成20px
 * @param scrollTop
 * @param dom
 */
export function getScrollId(scrollTop: number, dom: any, allData: any[] = []) {
  let currentId = '';
  const num = new Big(dom?.scrollHeight)
    .minus(dom?.scrollTop)
    .minus(dom?.clientHeight)
    .toNumber();
  const isLte = new Big(num).lte(20);
  if (isLte) {
    currentId = allData[allData.length - 1].key;
    return currentId;
  }
  for (let i = 0; i < allData.length; i++) {
    let _item = allData[i];
    // 元素相对父元素的高度；
    let _itemTop = document.getElementById(`${_item.key}`)?.offsetTop || 0;
    if (scrollTop + 20 >= _itemTop) {
      currentId = _item.key;
    } else {
      break;
    }
  }
  return currentId || '';
}

当滚动dom的时候去设置高亮，如下的handleScroll方法。

const buttonArr = [
  {
    title: '信息一',
    key: 'one',
  },
  {
    title: '信息二',
    key: 'two',
  },
  {
    title: '信息三',
    key: 'three',
  },
  {
    title: '信息四',
    key: ' four',
  },
];

const handleScroll = (event: { target: { scrollTop: number } }) => {
    const scrollTop = event?.target ? event.target?.scrollTop : 0;

    // 此处的方法就是上方所封装的方法，这个buttonArr就是一个个按钮组，结构如上所示
    const val = getScrollId(scrollTop, event?.target, buttonArr);
    // 把获取到key去设置成active的样式，在Hook中去做一下设置
    if (val) {
      setActive(val);
    }
  }

2.点击对应的button，定位到具体的模块

这个就很简单了，直接通过JS的一个原生方法 scrollIntoView 就可以实现了。前提是要给每一个模块加上一个id。请看如下代码：

const handleButtonClick = (val: string) => {
    document.getElementById(`${val}`)?.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'nearest',
    });
  };

以上就是实现这个交互的全部核心代码了。

实现以后呢，我仔细百度了一下，发现了一个react的插件，特别好用，几乎可以实现以上的全部功能，现在分享给大家一下：react-scroll，就是这个插件，感兴趣的话，可以去看看。

标签：const,dom,currentId,button,JS,key,跳转,scrollTop
来源： https://blog.csdn.net/qq_35770417/article/details/120951541

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS 实现滚动定位和点击button跳转

1.滚动定位到具体的tab

2.点击对应的button，定位到具体的模块