Kendo UI Angular DatePicker点击时滚动位置异常移动问题咨询

I’ve run into this exact issue with older Kendo Angular DatePicker versions (like your 2.2.0 setup) before—this unexpected scroll happens because the underlying Kendo Popup component (v2.1.0 in your case) tries to auto-position the date selector within the viewport, which can force the page to scroll if the picker would otherwise be partially out of view.

Here are two reliable fixes tailored to your version:

1. Disable Popup Auto-Scroll Behavior #

Use the popupSettings input on the DatePicker to turn off the scrollable behavior of the popup. This tells the component not to adjust the page scroll when opening the picker:

<kendo-datepicker 
    [popupSettings]="{ scrollable: false }"
></kendo-datepicker>

2. Attach Popup to the Body Element #

If the first fix doesn’t work (some older versions have quirks with scrollable), you can attach the popup directly to the <body> element instead of its parent container. This isolates the picker's positioning from the page's scroll context:

<kendo-datepicker 
    [popupSettings]="{ appendTo: 'body' }"
></kendo-datepicker>

Bonus: Consider Upgrading Components #

This is a known bug that’s been fixed in newer Kendo Angular versions. If you can afford to upgrade your dependencies (aim for @progress/kendo-angular-dateinputs v5.x or higher, along with matching versions of kendo-angular-popup, kendo-angular-intl, etc.), you’ll get rid of this issue entirely without needing custom settings.

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