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

Question

You may know, that there is a bug in bootstrap modals on some devices, that the page behind the modals scrolls instead of the modal ( http://getbootstrap.com/getting-started/#support-fixed-position-keyboards )

This bug can be easily fixed by adding a css-rule .modal-open { position: fixed; } .modal-open { position: fixed; } .

But this fix produces another bug - when you open a modal the page scrolls to the top. It can be resolved via JS, for example this way: https://stackoverflow.com/a/34754029/2244262

BUT I use angular-bootstrap package, which replaces bootstrap jquery events with promises . Because of this I don't know how to define global handlers for all modals on show/hide events. I have too many modals in my code and I don't want to define these handlers in each modal call, that's too dirty.

Any ideas on how to fix scroll to the top problem in my situation?

Answer 1

Maybe you can do it that way. The close function works when modal is closed. This prevents the page from scrolling up when the modal closes.

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);
}