[FIX] web: smoothly scroll to header and footer (scrollTo utils)

Before this commit, when you clicked on a link which was supposed to
reach the top or the bottom of the page, the animation looked strange.
This was because the scrollTo util cannot handle fixed-positioned
elements correctly, which the header and footer can both be.

While the animation did look strange, it was still working. So the time
was never took to investigate. However, if [1] was to be reverted (as
it will partially be in master to restore the scrollbar at its rightful
place now that it can be done (see [2])), using scrollTo on those
elements simply did not work at all anymore.

This commit fixes the problem by making an exception for those elements
specifically. Notice that there is another "bug": if the header or
footer is removed (as there are options to do so), not only scrolling to
"top" or "bottom" cannot work properly but the option also does not
show up in the editor panel. This will be considered as a limitation for
stable versions and be fixed later in master.

[1]: https://github.com/odoo/odoo/commit/4e7be69825163c0a0ff41c882a196fc7f3158fb3
[2]: https://github.com/odoo/odoo/pull/98429

closes odoo/odoo#101517

X-original-commit: 4883ae872c57f8c8db60ea5f9f4fd9df8bba4948
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2022-09-29 12:17:01 +02:00
parent b910f3405d
commit 7a91044372
+11 -1
View File
@@ -529,7 +529,10 @@ var dom = {
return size;
},
/**
* @param {HTMLElement} el - the element to stroll to
* @param {HTMLElement} el - the element to stroll to (limitation: if the
* element is using a fixed position, this function cannot work except
* if is the header (with the "top" id) or the footer (with the
* "bottom" id) for which exceptions have been made)
* @param {number} [options] - same as animate of jQuery
* @param {number} [options.extraOffset=0]
* extra offset to add on top of the automatic one (the automatic one
@@ -555,6 +558,13 @@ var dom = {
const isTopScroll = $scrollable.is($topLevelScrollable);
function _computeScrollTop() {
if (el.id === 'top') {
return 0;
}
if (el.id === 'bottom') {
return $scrollable[0].scrollHeight - $scrollable[0].clientHeight;
}
let offsetTop = $el.offset().top;
if (el.classList.contains('d-none')) {
el.classList.remove('d-none');