SPFx应用自定义器：仅滚动到页面底部时显示页脚

1. 修改Application Customizer，添加滚动事件与状态管理 #

首先在扩展中监听页面滚动，判断滚动位置并控制页脚的显示状态，同时处理组件生命周期的资源清理：

import { BaseApplicationCustomizer, PlaceholderContent, PlaceholderName } from '@microsoft/sp-application-base';
import { Footer } from './Component/Footer';
import { SPFI, getSP } from "@pnp/sp";
import * as React from 'react';
import * as ReactDom from 'react-dom';

export default class HelloWorldApplicationCustomizer extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {
  private _sp: SPFI;
  private _bottomPlaceholder: PlaceholderContent | undefined;
  private _isFooterVisible: boolean = false;
  private _scrollHandler: () => void;

  public onInit(): Promise<void> {
    this.context.placeholderProvider.changedEvent.add(this, this.renderPlaceHolders);
    
    this._scrollHandler = this._handleScroll.bind(this);
    window.addEventListener('scroll', this._scrollHandler, { passive: true });
    
    return Promise.resolve();
  }

  private _handleScroll(): void {
    // 预留50px提前触发距离，用户接近底部时就显示页脚
    const isNearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 50;
    if (isNearBottom !== this._isFooterVisible) {
      this._isFooterVisible = isNearBottom;
      this._renderFooter();
    }
  }

  private renderPlaceHolders(): void {
    const linksListName: string = this.properties.linksListName || 'FooterLinks';
    const feedbackListName: string = this.properties.feedbackListName || 'Feedback';

    this._sp = getSP(this.context);
    if (!this._bottomPlaceholder) {
      this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
    }

    this._renderFooter(linksListName, feedbackListName);
  }

  private _renderFooter(linksListName?: string, feedbackListName?: string): void {
    if (!this._bottomPlaceholder?.domElement) return;

    const element: React.ReactElement<any> = React.createElement(
      Footer,
      {
        sp: this._sp,
        linksListName: linksListName || this.properties.linksListName || 'FooterLinks',
        feedbackListName: feedbackListName || this.properties.feedbackListName || 'Feedback',
        isVisible: this._isFooterVisible
      }
    );
    ReactDom.render(element, this._bottomPlaceholder.domElement);
  }

  public onDispose(): void {
    window.removeEventListener('scroll', this._scrollHandler);
    if (this._bottomPlaceholder?.domElement) {
      ReactDom.unmountComponentAtNode(this._bottomPlaceholder.domElement);
    }
    super.onDispose();
  }
}

关键说明 #

• 用_isFooterVisible跟踪页脚显示状态，仅当状态变化时触发重渲染，避免不必要的性能消耗
• passive: true优化滚动事件性能，防止阻塞页面渲染
• 在onDispose中移除监听并卸载React组件，避免内存泄漏

2. 修改Footer组件，添加平滑过渡效果 #

通过CSS类切换实现显示隐藏，结合transition属性实现平滑动画：

Footer.tsx #

import * as React from 'react';
import { SPFI } from '@pnp/sp';
import styles from './Footer.module.scss';

interface IFooterProps {
  sp: SPFI;
  linksListName: string;
  feedbackListName: string;
  isVisible: boolean;
}

export const Footer: React.FC<IFooterProps> = ({ sp, linksListName, feedbackListName, isVisible }) => {
  // 保留原有的页脚逻辑（如获取链接、反馈数据等）
  return (
    <div className={`${styles.footerContainer} ${isVisible ? styles.footerVisible : styles.footerHidden}`}>
      <div className={styles.footerContent}>
        {/* 自定义页脚内容，比如链接、版权信息等 */}
        <p>© 2024 自定义页脚</p>
      </div>
    </div>
  );
};

Footer.module.scss #

.footerContainer {
  width: 100%;
  background-color: #f3f2f1;
  padding: 1.2rem;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.footerHidden {
  transform: translateY(100%);
}

.footerVisible {
  transform: translateY(0);
}

.footerContent {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

关键说明 #

• 用transform: translateY控制显示隐藏，比display: none更适合过渡动画
• position: fixed固定页脚在底部，避免跟随页面滚动
• transition属性设置0.3秒的平滑过渡效果，提升用户体验

3. 核心注意事项 #

• 滚动触发阈值可根据需求调整document.body.offsetHeight - 50中的50px数值
• 确保页脚的z-index足够高，避免被页面其他内容遮挡
• 若页脚高度变化，需同步调整translateY的百分比（比如页脚高度为80px时，可设置translateY(80px)）

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