使用Angular-bootstrap模式和窗口位置时如何防止页面滚动到顶部：ipad的固定解决方法？答案

【问题标题】：How to prevent page scroll to top when using Angular-bootstrap modal and window position:fixed workaround for ipad?使用Angular-bootstrap模式和窗口位置时如何防止页面滚动到顶部：ipad的固定解决方法？
【发布时间】：2017-01-11 07:06:00
【问题描述】：

您可能知道，在某些设备上的引导模式中存在一个错误，即模式背后的页面滚动而不是模式 (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards)

可以通过添加 css 规则 .modal-open { position: fixed; } 轻松修复此错误。

但此修复会产生另一个错误 - 当您打开模式时，页面会滚动到顶部。可以通过JS解决，例如这样：https://stackoverflow.com/a/34754029/2244262

但我使用angular-bootstrap 包，其中replaces bootstrap jquery events with promises。因此，我不知道如何为显示/隐藏事件的所有模式定义全局处理程序。我的代码中有太多模态，我不想在每个模态调用中定义这些处理程序，这太脏了。

关于如何在我的情况下解决滚动到顶部问题的任何想法？

【问题讨论】：

决定通过给所有模态体一个样式max-height: calc(100vh - 300px); 自动溢出来摆脱高模态。这样所有高模态都有可滚动的主体

标签： javascript css angularjs twitter-bootstrap angular-bootstrap

【解决方案1】：

也许你可以这样做。关闭模式时关闭功能起作用。这可以防止页面在模式关闭时向上滚动。

ngOnInit(): void {
 document.body.style.position = 'initial';
 document.body.style.top = `-${window.scrollY}px`;
 ...
}

close(result?: any): void {
 this.activeModal.close(result || {});

 const scrollY = document.body.style.top;
 document.body.style.position = '';
 document.body.style.top = '';
 window.scrollTo(0, parseInt(scrollY || '0') * -1);
}

【讨论】：