[FIX] web: make smooth scrolling during drag&drop work with BS5

Since BS5, the <html> receive the 'smooth' CSS value for the
'scroll-behavior' property. As the name indicates, it makes scrolling
smooth (on click on anchor link for example) instead of an instant
jump (although the exact behavior is left to the browser).

The problem is that this auto-smooth from the browser conflicts with
the "smooth drag and drop" code (at least if the scrolling target is
actually the `<html>` element which is never the case currently). Indeed
this code expects to make small instant jump depending on the position
of the user cursor. This commit solves the problem by disabling the
browser auto smooth for the duration of the drag and drop.

Note: a further commit will move back the scrollbar behavior out of the
`#wrapwrap`, this is thus especially needed.

Note: this bug fix could be back-ported, should the need arise (custo
might want to use the 'smooth' 'scroll-behavior' in stable without BS5).
Although the only side effect is slower smooth drag and drop.

X-original-commit: 81ed9bee81bacca7b55598e9af7cac51cd7805cf
Part-of: odoo/odoo#102785
This commit is contained in:
qsm-odoo
2022-10-09 18:52:49 +02:00
parent 0783f7ca71
commit d134987f21
@@ -159,6 +159,10 @@ const SmoothScrollOnDrag = Class.extend(mixins.ParentedMixin, {
*/
_startSmoothScroll(ui) {
this._stopSmoothScroll();
this._initialScrollBehavior = this.$scrollTarget[0].style.scrollBehavior;
this.$scrollTarget[0].style.scrollBehavior = 'auto';
this.autoScrollHandler = setInterval(
() => {
// Prevents Delta's from being different from 0 when scroll should not occur (except when
@@ -222,6 +226,8 @@ const SmoothScrollOnDrag = Class.extend(mixins.ParentedMixin, {
*/
_stopSmoothScroll() {
clearInterval(this.autoScrollHandler);
this.$scrollTarget[0].style.scrollBehavior = this._initialScrollBehavior || '';
},
/**
* Updates the options depending on the offset position of the draggable