panel: disableParentScroll:true disables both mdPanel and parent

angular / material

Material design for AngularJS

https://material.angularjs.org/

MIT License

16.54k stars 3.39k forks source link

panel: disableParentScroll:true disables both mdPanel and parent #9965

Open nitsud333 opened 8 years ago

nitsud333 commented 8 years ago

Actual Behavior:

What is the issue? *setting disableParentScroll: true disables mdPanel scroll ability
What is the expected behavior? Panel should scroll while background doesn't.

CodePen (or steps to reproduce the issue): *

`CodePen Demo which shows your issue: https://codepen.io/nitsud333/pen/WoeWpP
`Details: While checkbox is unchecked, Select Menu options are scroll-able. When checkbox is checked, Select Menu options are not scroll-able.

Angular Versions: *

Angular Version:1.5.5
Angular Material Version:1.1.0

otterslide commented 7 years ago

Same issue here, version 1.1.4 of Material.

Disable Scroll Mask is set to true on MdPanel

MdPanelRef.prototype._createPanel = function() {
...
if (self.config['disableParentScroll']) {
    self._restoreScroll = self._$mdUtil.disableScrollAround(
    null, self.panelContainer, { disableScrollMask: true });
}

setting disableScrollMask: false fixes the issue.

In my case, the scroll wheel and touchmove are only disabled, I can scroll manually by dragging the scroll bar down. It seems the demo above does the same.

Anybody know why disableScrollMask is hard-coded to true? As far as I see, setting it to false fixes this issue.

When it's set to true it attaches the disable mousewheel and touchmove events to the panel.

ronilio commented 6 years ago

Has this not been resolved? I'm experiencing this right now. Pretty annoying.

Splaktar commented 6 years ago

I updated the CodePen to 1.1.9 and this is still an issue.

scriptsure commented 5 years ago

Any solution for this issue?

laetitia-gangloff commented 5 years ago

The proposition of otterslide seems working. At this moment we didn't experiment any disturbing side effect.

scriptsure commented 5 years ago

So you literally made source code changes then reuglified the js? Pain right?

laetitia-gangloff commented 5 years ago

Not really, I just edit both files. We use an older version and we are linked to bower (why it is bower-material and not angular-material branch). But you can see my current version here: https://github.com/laetitia-gangloff/bower-material/commit/f2c8486eb376eed2b00c66b03840dbe4c29c40d3

Splaktar commented 5 years ago

I tried the suggestion by @otterslide above with the latest code in master and this didn't work for me. I wasn't able to scroll the menu even by dragging the vertical scrollbar.