When the mouse is on the grid, the container can't scroll

[calebkiage]

Hello, I have disable grid scrolling but when the mouse pointer is in the grid, the container cannot scroll. Any ideas on how I can disable this behavior?

[calebkiage]

So I had a look at the source code and found that there is an event binding on the uiGridRenderContainer directive (line 2337 on version v3.0.0-rc.12-6fa2e47) that causes this behavior.

$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
          // use wheelDeltaY
          evt.preventDefault();
          ...
});

Is there a reason why the grid needs to disable the browser's native scrolling? And if so, can I disable this?

[c0bra]

Yes it needs to catch those events so it can virtualize properly. That's
the whole reason for the grid, basically.
On Nov 3, 2014 5:15 AM, "Caleb Kiage" notifications@github.com wrote:

So I had a look at the source code and found that there is an event
binding on the uiGridRenderContainer directive (line 2337 on version
v3.0.0-rc.12-6fa2e47) that causes this behavior.

$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
// use wheelDeltaY
evt.preventDefault();
...});

Is there a reason why the grid needs to disable the browser's native
scrolling? And if so, can I disable this?

—
Reply to this email directly or view it on GitHub
#1926 (comment).

[calebkiage]

Oh, thanks for the clarification. What I'm wondering about is why it has to call evt.preventDefault();. Most users find it very frustrating when the grid prevents them from scrolling the page especially when the grid takes the container's full width.

[mese79]

Yes, this is also my issue.

[dreftymac]

+1

[jraadt]

+1
This is frustrating especially on mobile where the table takes up the full width and height of the screen. You can't scroll to anything below the table.

[dshybeka]

+1

[jraadt]

In case it helps anyone, here's the code I added to fix this issue. It only prevents the page from scrolling when your mouse is in the grid and you haven't reached the top or bottom of the grid yet. I moved the evt.preventDefault() from here:

$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
          // use wheelDeltaY
          evt.preventDefault();
          ...
});

to:

            $elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
              // use wheelDeltaY

              var newEvent = GridUtil.normalizeWheelEvent(evt);

              var args = { target: $elm };
              if (newEvent.deltaY !== 0) {
                var scrollYAmount = newEvent.deltaY * -120;

                // Get the scroll percentage
                var scrollYPercentage = (containerCtrl.viewport[0].scrollTop + scrollYAmount) / (rowContainer.getCanvasHeight() - rowContainer.getViewportHeight());

                if ((newEvent.deltaY == -1 && scrollYPercentage < 1) || (newEvent.deltaY == 1 && scrollYPercentage > 0)) {
                  evt.preventDefault();
                }
                ...

[c0bra]

@jraadt Thanks for this. I'll take a look at implementing it. I'd be curious how it will affect scrolling within subgrids.