Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling broken when hovering handsontable container #5212

Closed
lulezi opened this issue Jun 26, 2018 · 22 comments

Comments

@lulezi
Copy link

commented Jun 26, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jun 27, 2018

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.

@AMBudnik AMBudnik added the Type: Bug label Jun 27, 2018

@lulezi

This comment has been minimized.

Copy link
Author

commented Jun 27, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2018

Thank you for checking that @lulezi

@AMBudnik

This comment has been minimized.

Copy link
Contributor

commented Dec 4, 2018

inform forum and Zen #22558

@mchilicki

This comment has been minimized.

Copy link

commented Feb 7, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Feb 8, 2019

Hey @mchilicki

it hasn't been scheduled yet

@mchilicki

This comment has been minimized.

Copy link

commented Feb 8, 2019

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

@AMBudnik

This comment has been minimized.

Copy link
Contributor

commented Feb 8, 2019

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

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

This comment has been minimized.

Copy link

commented Feb 8, 2019

Ok, thank you, keep us updated, please

@wojciechczerniak wojciechczerniak added this to the March 2019 milestone Feb 13, 2019

@wojciechczerniak

This comment has been minimized.

Copy link
Member

commented Feb 14, 2019

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

Fix idea: #4521 (comment)

@vladiuz1

This comment has been minimized.

Copy link

commented Apr 7, 2019

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

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

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

This comment has been minimized.

Copy link

commented May 31, 2019

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

@AMBudnik

This comment has been minimized.

Copy link
Contributor

commented Jun 3, 2019

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.

@wojciechczerniak wojciechczerniak modified the milestones: May 2019, June 2019 Jun 4, 2019

@waynermaia

This comment has been minimized.

Copy link

commented Jun 24, 2019

Ward

@wojciechczerniak wojciechczerniak modified the milestones: June 2019, July 2019 Jul 1, 2019

swistach added a commit that referenced this issue Jul 4, 2019

Fixed: scroll should not prevent default behaviour if the user reache…
…s bottom/top or left/right edge. Added new option in Walkontable - preventWheel - it might be cofigured in initialization object. WIP. #5212

swistach added a commit that referenced this issue Jul 9, 2019

Added: new property to prevent wheel on HOT instance, additional test…
… specs for wheel event over cloned overlays. Changed: WOT.Viewport has destroy() method to clear its instance of the eventManager. #5212

swistach added a commit that referenced this issue Jul 10, 2019

swistach added a commit that referenced this issue Jul 11, 2019

swistach added a commit that referenced this issue Jul 23, 2019

@huangdaodai

This comment has been minimized.

Copy link

commented Jul 23, 2019

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

This comment has been minimized.

Copy link

commented Jul 23, 2019

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

This comment has been minimized.

Copy link

commented Jul 23, 2019

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

swistach added a commit that referenced this issue Jul 30, 2019

WheelEvent on a table should not prevent default action if not necess…
…ary. (#6097)

* Fixed: scroll should not prevent default behaviour if the user reaches bottom/top or left/right edge. Added new option in Walkontable - preventWheel - it might be cofigured in initialization object. WIP. #5212

* Added: new property to prevent wheel on HOT instance, additional test specs for wheel event over cloned overlays. Changed: WOT.Viewport has destroy() method to clear its instance of the eventManager. #5212

* Reverted unnecessary changes in Viewport.js. Removed rest of the unnecessary code in overlays. #5212

* Necessary changes after merge develop into feature's brunch. #5212

* Updated: DefaultSettings definition. Added: types test. #5212
@AMBudnik

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2019

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

This comment has been minimized.

Copy link

commented Aug 13, 2019

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

Thank you!

@AMBudnik

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2019

Thank you for feedback, Richard.

@lulezi

This comment has been minimized.

Copy link
Author

commented Aug 14, 2019

@AMBudnik Thanks, works great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.