直击移动端Web应用锚点设计的痛点

2023-10-12 14:09:44

最近投入了大量精力在移动端Web应用开发上。随着页面迭代的不断推进，页面模块数量随之激增。彼时，产品经理提出了为内容模块较多的页面添加锚点功能的需求。起初，我乐观地认为市面上应该有现成的锚点组件可供使用。然而，一番调研之后，我却发现自己错了。

市面上虽然有不少移动端页面模块锚点产品，但它们却无法满足我们的需求。于是，我踏上了自行设计锚点功能的征途。本文将深入探讨移动端Web应用锚点设计的痛点，并分享我们的解决方案。

尽管移动端Web应用在飞速发展，但锚点设计领域却鲜有创新。现有的大多数锚点组件都存在以下问题：

无法与现有导航栏集成： 传统锚点组件通常独立于导航栏，导致用户体验不佳。
样式单一，缺乏自定义性： 锚点组件的样式往往过于单调，无法满足不同产品的个性化需求。
性能低下： 一些锚点组件在加载时会对页面性能造成显著影响。

为了解决这些痛点，我们设计了一款创新的锚点组件，它不仅与现有导航栏无缝集成，而且还提供丰富的自定义选项。该组件采用轻量级设计，不会对页面性能造成任何影响。

技术实现

我们的锚点组件使用JavaScript和CSS编写。它通过监听页面滚动事件来实现锚点的自动定位。以下是实现该组件的关键步骤：

为每个锚点创建一个ID属性。
在页面加载时，获取所有锚点元素的坐标。
监听页面滚动事件，并根据当前滚动位置更新锚点的激活状态。
使用CSS样式自定义锚点的外观。

代码示例

const anchors = document.querySelectorAll('[id]');
const navigation = document.querySelector('.navigation');

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset;

  anchors.forEach((anchor) => {
    const anchorTop = anchor.offsetTop;

    if (scrollTop >= anchorTop - navigation.offsetHeight) {
      anchor.classList.add('active');
    } else {
      anchor.classList.remove('active');
    }
  });
});