Angular2中Datepicker（matCalendar）随页面滚动移动的实现方法咨询

Hey there! Since you're new to Angular, let's break this down into easy-to-follow steps to get your datepicker panel scrolling along with the page. I'll cover both core concepts and a concrete implementation using Angular Material (one of the most common datepicker libraries) since that's what many developers use.

核心思路 #

The main idea here is simple:

• Listen for page scroll events to detect when the user scrolls the page
• Track the real-time position of the datepicker's trigger element (the input/toggle you click to open the panel)
• Update the calendar panel's position dynamically so it stays aligned with the trigger as the page moves

具体实现（以Angular Material Datepicker为例） #

Step 1: Set up your component #

First, make sure you have Angular Material installed and imported the datepicker module. Then add this code to your component:

Component TypeScript Code

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-datepicker-scroll',
  templateUrl: './datepicker-scroll.component.html',
  styleUrls: ['./datepicker-scroll.component.css']
})
export class DatepickerScrollComponent implements AfterViewInit {
  // Get references to the datepicker and its trigger input
  @ViewChild('picker') datepicker!: MatDatepicker<Date>;
  @ViewChild('triggerInput') triggerElement!: ElementRef;
  private panelElement: HTMLElement | null = null;

  ngAfterViewInit() {
    // Grab the actual DOM element of the datepicker panel
    this.panelElement = this.datepicker._getPanelElement();
    
    // Listen for scroll events with a small debounce to avoid performance lag
    fromEvent(window, 'scroll')
      .pipe(debounceTime(10))
      .subscribe(() => this.updatePanelPosition());
  }

  private updatePanelPosition() {
    // Only update if the datepicker is open and we have all required elements
    if (!this.datepicker.opened || !this.panelElement || !this.triggerElement) return;

    const triggerRect = this.triggerElement.nativeElement.getBoundingClientRect();
    
    // Set the panel to fixed positioning relative to the viewport
    this.panelElement.style.position = 'fixed';
    this.panelElement.style.top = `${triggerRect.bottom}px`;
    this.panelElement.style.left = `${triggerRect.left}px`;
    // Override Material's default transform to prevent positioning conflicts
    this.panelElement.style.transform = 'none';
  }

  // Ensure position is set correctly when opening the datepicker
  openDatepicker() {
    this.datepicker.open();
    setTimeout(() => this.updatePanelPosition(), 0);
  }
}

Component Template

<mat-form-field>
  <input 
    matInput 
    [matDatepicker]="picker" 
    placeholder="Choose a date"
    #triggerInput
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Step 2: Handle edge cases #

• Performance: Using debounceTime(10) reduces how often the position update runs, which is critical because scroll events fire extremely frequently.
• Panel Closing: When the datepicker closes, position updates automatically stop (thanks to the this.datepicker.opened check).
• Trigger Out of View: If you want to hide the panel when the trigger scrolls off-screen, add this check inside updatePanelPosition():

  if (triggerRect.top < 0 || triggerRect.bottom > window.innerHeight) {
    this.datepicker.close();
  }
  

自定义Datepicker的通用方案 #

If you're using a custom datepicker instead of Angular Material, the core logic stays identical:

1. Use ViewChild to get references to your trigger element and calendar panel.
2. Listen for the window:scroll event (with debounce for performance).
3. Calculate the trigger's position using getBoundingClientRect().
4. Update the panel's top and left styles to match the trigger's current position.

Hope this gives you a clear path forward! Since you're new to Angular, start with the Angular Material example first—it's straightforward and covers all key concepts. If you run into any specific issues with your setup, feel free to share more details.

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