Material: tabs: mouse wheel does not scroll through tabs in Firefox

[gauravlodha]

Horizontal scroll not working in firefox on md-tabs

issue exist on site itself
https://material.angularjs.org/latest/demo/tabs

I am using

• AngularJS: 1.7.7
• AngularJS Material: 1.1.13
• OS: Windows 10
• Browsers: Firefox 64

[codymikol]

Do you mean on the actual tab buttons to switch to a tab, or the tab content?

[gauravlodha]

tab buttons

[codymikol]

I see so you want this sort of implementation

I believe the current implementation is working as expected so this would be more of a feature request. @Splaktar are there any a11y reasons this couldn't be implemented? I think it should be possible.

[gauravlodha]

yes current implementation working in chrome and IE

Chrome:

https://www.screencast.com/t/23uMiblA8

IE:

https://www.screencast.com/t/EEsGASXr

but not working in firefox

https://www.screencast.com/t/UVOeyfloJQr

is this a bug right?

[codymikol]

Oh wow, that actually does not function in my app in chrome. I guess it is a bug

The scrolling for me acts kind of strange in the demo as well, not very smooth.

[Splaktar]

You are talking about the mouse wheel scrolling through paginated tabs right?

This works well for me on macOS with Chrome and Safari, but it isn't working for me on Firefox. On Firefox, the mouse wheel on the paginated tabs causes the window to scroll.

I tested this on prior versions and this does not appear to have ever worked properly on Firefox.

[gauravlodha]

@Splaktar yes right, I am talking about the mouse wheel scrolling through paginated tabs and thank you for looking into the issue :)

[jazdw]

@Splaktar I have also identified an issue with tabs, but this exists in Chrome too. Its due to having jQuery loaded.

This code is the issue, with jQuery loaded event.wheelDelta is undefined, you have to use event.originalEvent.wheelData instead.

  function scroll (event) {
    if (!ctrl.shouldPaginate) return;
    event.preventDefault();
    ctrl.offsetLeft = fixOffset(ctrl.offsetLeft - event.wheelDelta);
  }

Just posting here in case its related, if not I'll open a new issue.

Test code pen:
https://codepen.io/jazdw/pen/eXVPPr?editors=1011

[jazdw]

So I think they are related, kind of. The mousewheel event doesn't even fire on Firefox (latest).

[jazdw]

Here's a work around for getting wheelDelta with jQuery (3.x) loaded -

jQuery.event.addProp('wheelDelta', function(event) {
    return event.wheelDelta;
});

[gauravlodha]

@Splaktar ,
I think issue #11666 , also related to above issue

[Splaktar]

Yep, according to MDN mousewheel docs, we should be using wheel instead of mousewheel.

[jazdw]

Note that you still need to tell jQuery to pass the deltaX and deltaY properties through as the fix above does not check the original event.

jQuery.event.addProp('deltaX', function(event) {
    return event.deltaX;
});
jQuery.event.addProp('deltaY', function(event) {
    return event.deltaY;
});