目录

1.滚动定位到具体的tab

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

---

最近在开发项目的时候，有一个交互上的需求，就是滚动内容区域的不同模块，要高亮显示上方模块对应的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，就是这个插件，感兴趣的话，可以去看看。