显示 Datepicker 组件时自动滚动页面答案

【问题标题】：Auto scroll page when displaying Datepicker component显示 Datepicker 组件时自动滚动页面
【发布时间】：2018-09-25 01:55:59
【问题描述】：

我在我的 Angular 应用程序中使用 ngx datepicker。当 datepicker 组件渲染到足以显示整个 datepicker 组件时，我希望页面向下滚动一点。我已经看到了官方的日期选择器文档页面，即使页面没有滚动 https://valor-software.com/ngx-bootstrap/#/datepicker 此外，如果整个日期选择器可见，则不需要滚动。解决这个问题的最佳方法是什么？感谢您的帮助。

【问题讨论】：

在datepicker标签前添加一个span，在datepicker标签中添加focus或click监听器，当click/focus事件触发时，滚动到span

标签： angular datepicker angular2-directives angular2-components

【解决方案1】：

示例代码：

https://stackblitz.com/edit/angular-ngx-datepicker-scroll

选择日期选择器时将滚动到顶部。

$('html, body').animate({
    scrollTop: $('#datepicker').offset().top + 30 //#DIV_ID is an example. Use the id of your destination on the page
}, 'slow');

【讨论】：