React 16.3.1无Hooks实现滚动更新URL及相关功能求助

一、整体思路 #

用类组件搭建包含四个区块的页面，通过监听滚动事件判断当前视口内的区块并更新URL哈希；利用原生scrollIntoView实现平滑滚动；给页面添加固定下载按钮，点击后导出当前激活区块的内容为文本文件。

二、代码实现步骤 #

1. 完整类组件代码 #

import React from 'react';

class SmoothScrollPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSection: 'overview' // 默认激活首个区块
    };
    // 绑定事件处理函数
    this.handleScroll = this.handleScroll.bind(this);
    this.downloadSectionContent = this.downloadSectionContent.bind(this);
    this.scrollToSection = this.scrollToSection.bind(this);
  }

  // 组件挂载后监听滚动事件，同时处理页面加载时的哈希定位
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    if (window.location.hash) {
      const targetId = window.location.hash.slice(1);
      this.scrollToSection(targetId);
    }
  }

  // 组件卸载前移除滚动监听，避免内存泄漏
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  // 平滑滚动到指定区块
  scrollToSection(sectionId) {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }

  // 滚动时判断当前激活区块，更新状态与URL哈希
  handleScroll() {
    const sections = document.querySelectorAll('.section');
    let currentSection = this.state.activeSection;

    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;
      // 设定判定阈值：区块顶部进入视口80%范围时判定为激活
      if (window.scrollY >= sectionTop - window.innerHeight * 0.2 && 
          window.scrollY < sectionTop + sectionHeight - window.innerHeight * 0.2) {
        currentSection = section.id;
      }
    });

    // 仅当区块变化时更新状态和URL，避免重复操作
    if (currentSection !== this.state.activeSection) {
      this.setState({ activeSection: currentSection });
      // 使用pushState更新哈希，避免触发滚动循环
      window.history.pushState(null, null, `website.com/specific-string#${currentSection}`);
    }
  }

  // 下载当前激活区块的内容
  downloadSectionContent() {
    const section = document.getElementById(this.state.activeSection);
    if (!section) return;

    // 若需保留HTML结构，可将textContent改为innerHTML
    const content = section.textContent.trim();
    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    
    a.href = url;
    a.download = `${this.state.activeSection}-content.txt`;
    a.click();
    URL.revokeObjectURL(url); // 释放临时URL内存
  }

  render() {
    return (
      <div className="page-container">
        {/* 导航按钮，点击平滑跳转对应区块 */}
        <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, padding: '10px', background: '#fff', zIndex: 99 }}>
          <button onClick={() => this.scrollToSection('overview')} style={{ margin: '0 10px' }}>Overview</button>
          <button onClick={() => this.scrollToSection('about-us')} style={{ margin: '0 10px' }}>About us</button>
          <button onClick={() => this.scrollToSection('courses')} style={{ margin: '0 10px' }}>Courses</button>
          <button onClick={() => this.scrollToSection('news')} style={{ margin: '0 10px' }}>News</button>
        </nav>

        {/* 固定下载按钮 */}
        <button 
          onClick={this.downloadSectionContent}
          style={{ position: 'fixed', top: '60px', right: '20px', zIndex: 100, padding: '8px 16px' }}
        >
          下载当前区块内容
        </button>

        {/* 四个页面区块，每个占满一屏 */}
        <div id="overview" className="section" style={{ height: '100vh', padding: '80px 20px', background: '#f5f5f5' }}>
          <h2>Overview</h2>
          <p>这里是Overview区块的内容，用于展示网站核心信息...</p>
        </div>
        <div id="about-us" className="section" style={{ height: '100vh', padding: '80px 20px', background: '#e8e8e8' }}>
          <h2>About us</h2>
          <p>这里是About us区块的内容，用于介绍团队背景与发展历程...</p>
        </div>
        <div id="courses" className="section" style={{ height: '100vh', padding: '80px 20px', background: '#dcdcdc' }}>
          <h2>Courses</h2>
          <p>这里是Courses区块的内容，用于展示课程体系与学习路径...</p>
        </div>
        <div id="news" className="section" style={{ height: '100vh', padding: '80px 20px', background: '#cfcfcf' }}>
          <h2>News</h2>
          <p>这里是News区块的内容，用于发布最新行业资讯与活动通知...</p>
        </div>
      </div>
    );
  }
}

export default SmoothScrollPage;

2. 核心逻辑说明 #

• 平滑滚动：通过element.scrollIntoView({ behavior: 'smooth' })调用浏览器原生平滑滚动能力，无需额外依赖。
• 哈希更新：滚动时计算每个区块的位置，判断当前视口内的激活区块，用history.pushState更新URL哈希，避免直接修改window.location.hash触发的滚动循环。
• 内容下载：将区块内容转为Blob对象，创建临时a标签触发下载，完成后释放临时URL内存，避免资源浪费。

3. 可调参数说明 #

• 滚动判定阈值：window.innerHeight * 0.2可根据需求调整，数值越小，区块需要更多部分进入视口才会触发哈希更新。
• 下载内容格式：若需导出HTML结构，将section.textContent改为section.innerHTML即可。

内容的提问来源于stack exchange，提问作者Gareema