Add overflowX/overflowY check in _getScrollableNodes in iron-dropdown-scroll-listener

[valdrinkoshi]

From @oliver92 on June 1, 2017 14:8

Description

If i add an element with only overflowX = auto or overflowY = auto the _getScrollableNodes only checks for overflow = auto on the elements not the individual overflow ones.

Expected outcome

If i add an element with only overflowX = auto or overflowY = auto i expect the scrollLock to work for those elements as well.

Actual outcome

The scroll lock works, but the elements that needs to scroll does not.

Live Demo

Dont have one but i know exactly how to fix it: change the ifs of the _getScrollableNodes method to:

if ((style.overflow !== 'scroll' && style.overflow !== 'auto') && (style.overflowY !== 'scroll' && style.overflowY !== 'auto') && (style.overflowX !== 'scroll' && style.overflowX !== 'auto')) { style = window.getComputedStyle(node); } if (style.overflow === 'scroll' || style.overflow === 'auto' || (style.overflowY === 'scroll' || style.overflowY === 'auto') || (style.overflowX === 'scroll' || style.overflowX === 'auto')) { scrollables.push(node); }

Steps to reproduce

1. Add element in the dropdown with overflowX or overflowY set to auto. But dont set the overflow property.
2. Open the page in a web browser
3. Try to scroll the element, it wont scroll.

Browsers Affected

• [ ] Chrome
• [x ] Firefox
• [ x] Safari 9
• [ x] Safari 8
• [ x] Safari 7
• [ x] Edge
• [ x] IE 11
• [ x] IE 10

Copied from original issue: PolymerElements/iron-dropdown#140

[valdrinkoshi]

is this still an issue with the latest version? The scroll manager has moved to iron-overlay-behavior, and there were couple bugfixes there, so it might not be an issue anymore...

[valdrinkoshi]

From @oliver92 on March 30, 2018 7:55

No the issue is still there.

[valdrinkoshi]

Confirmed http://jsbin.com/bahawiv/1/edit?html,output, I'll move the issue in iron-overlay-behavior. @oliver92 feeling like sending a PR?

[oliver92]

Yea sure, i can do that. Though the ifs are quite ugly. Maybe theres a better way ... :) Ill do it anyway, soon...

[valdrinkoshi]

Nice! and in order to test it, it should be enough to just update the overflow styles to overflow-y and overflow-x of this test element https://github.com/PolymerElements/iron-overlay-behavior/blob/6d28420cee4a6cab1de0292e52be9ca4c73378ae/test/x-scrollable-element.html#L22-L31