Handsontable: Scrolling broken when hovering handsontable container

[lulezi]

Description

When hovering over the handsontable container, I cannot scroll. I've seen the same behaviour since v2.0.0, v1.18.1 is the last version where scrolling was possible.

Steps to reproduce

1. Create a handsontable on a page that has content above and below the table.
2. Scroll to the table.
3. Scroll to the bottom of the table.
4. If you're at the bottom of the table and scrolling down (or at the top and scrolling up), the whole page should scroll but doesn't.

Demo

https://jsfiddle.net/8ffpsqt6/38/

Your environment

• Handsontable version: 4.0.0
• Browser Name and version: Google Chrome 67.0.3396.87
• Operating System: macOS 10.12.6

[AMBudnik]

Thank you for sharing @lulezi

you're right. When I hold the cursor at the same point it won't release the focus from the table. If I move it pixel left or right (even if still on the table) it works as expected.

However I see the same bug in older versions, I've tried some of them (1.18.1, 1.16.0, 1.10.0) but I'm testing it on Windows so maybe for Mac is has changed for worse.

[lulezi]

Thanks @AMBudnik!

Yes, my coworkers on Windows can also continue scrolling after moving the mouse (or even just waiting for half a sec). On the Mac, as long as the mouse is within the handsontable, I cannot scroll.

[AMBudnik]

Thank you for checking that @lulezi

[AMBudnik]

inform forum and Zen #22558

[mchilicki]

Hi, me and my team also encounter this problem. When will you correct it?
Handsontable Version: 6.2.0
Release date: 14/11/2018 (built at 07/11/2018 13:01:49)
Windows Server 2012 R2
Chrome 71.0.3578.98
Internet Explorer 11.0.96
Opera 57.0.3098.116

[AMBudnik]

Hey @mchilicki

it hasn't been scheduled yet

[mchilicki]

Do you know when will it be corrected? Or how can I make some hack to make it work?

[AMBudnik]

Sorry, in our internal system scheduling for this issue looks like this

* Start date: 07.01.2019
* Estimated end date: ??
* Real end date:

[mchilicki]

Ok, thank you, keep us updated, please

[wojciechczerniak]

More test cases can be found in #4114, #4521, #4971

Fix idea: https://github.com/handsontable/handsontable/issues/4521#issuecomment-403880742

[vladiuz1]

This is a big issue. A scroll-able page with a hot is pretty much broken and unusable.

Firefox gives this warning:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

And this is Chrome:

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Otherwise, its an amazing tool. ;)

[wojciechczerniak]

Hi @vladiuz1 The console logs you've posted are related more to Passive Event Listeners #4526 to which we've recently switched most of our scroll listeners. Check v7.0.2.

Thanks!

[renatonouman]

Are there any new developments on fixing this issue? Is a fix scheduled already?

[AMBudnik]

It's in our current milestone. We'll do our best to solve it within a month but I cannot guarantee to add this in the next release.

[waynermaia]

Ward

[huangdaodai]

I got the same problem in Vue-wrapper and I fixed it with a custom directive:
Vue.directive('fixScroll', { inserted(el, binding, vm) { const div = document.createElement('div'); div.style.position = 'absolute'; div.style.zIndex = -100; div.style.top = 0; div.style.left = 0; div.style.width = '100%'; div.style.height = '100%'; div.style.background = 'opacity'; el.appendChild(div); var timer = null; const scrollHandler = utils.throttle((e) => { e&&e.stopPropagation(); clearTimeout(timer); div.style.zIndex = 500; timer = setTimeout(() => { div.style.zIndex = -100; }, 2000); }, 50); window.addEventListener('wheel', scrollHandler, true); const moveHandler = utils.throttle(() => { div.style.zIndex = -100; clearTimeout(timer); }, 1000); window.addEventListener('mousemove', moveHandler); } });

[waynermaia]

I got the same problem in Vue-wrapper and I fixed it with a custom directive:
Vue.directive('fixScroll', { inserted(el, binding, vm) { const div = document.createElement('div'); div.style.position = 'absolute'; div.style.zIndex = -100; div.style.top = 0; div.style.left = 0; div.style.width = '100%'; div.style.height = '100%'; div.style.background = 'opacity'; el.appendChild(div); var timer = null; const scrollHandler = utils.throttle((e) => { e&&e.stopPropagation(); clearTimeout(timer); div.style.zIndex = 500; timer = setTimeout(() => { div.style.zIndex = -100; }, 2000); }, 50); window.addEventListener('wheel', scrollHandler, true); const moveHandler = utils.throttle(() => { div.style.zIndex = -100; clearTimeout(timer); }, 1000); window.addEventListener('mousemove', moveHandler); } });

utils ... ?

[huangdaodai]

Just my tool for throttling ,ignore that with:
scrollHandler = (e)=>{
e&&e.stopPropagation();
clearTimeout(timer);
div.style.zIndex = 500;
timer = setTimeout(() => {
div.style.zIndex = -100;
}, 2000);
}

[AMBudnik]

Hey Guys, I'm glad to see this issue solved.

Please update to v 7.1.1 and let me know if works for you as well.
@lulezi
@huangdaodai @waynermaia @renatonouman @vladiuz1 @mchilicki

[rwagstaff]

Can confirm this is working for me.
Tested on Chrome, IE, Edge, Firefox.

Thank you!

[AMBudnik]

Thank you for feedback, Richard.

[lulezi]

@AMBudnik Thanks, works great.