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

Redesign: add more-content-above-below indicators in scrollable areas #7561

Closed
bwindels opened this issue Oct 25, 2018 · 4 comments
Closed
Assignees

Comments

@bwindels
Copy link
Contributor

Like so: http://dabblet.com/gist/2462915

@bwindels bwindels added this to Not Started in Web App Team Oct 25, 2018
@bwindels
Copy link
Contributor Author

Input from Nad: try with a background to transparent gradient

@lampholder lampholder added this to Todo (Unordered) in Redesign Backlog Oct 26, 2018
@lampholder lampholder moved this from All redesign tasks (Unordered) to Prioritized next list in Redesign Backlog Oct 26, 2018
@lampholder lampholder added this to the RW016 milestone Oct 26, 2018
@bwindels
Copy link
Contributor Author

bwindels commented Nov 6, 2018

Hmm, just had a quick go at this, and doing background to transparent might be a bit more involved, because the gradient is drawn behind the text, so anything of the same color as the background is not visible.

To have a gradient drawn on top of the children of a scroll area, we'd have to position them absolutely and set a z-index and pointer-events: none, but only show them when an element is overflowing. Firefox supports overflow events which we already use as a fallback for the native scrollbars, but this won't work elsewhere ...

@bwindels
Copy link
Contributor Author

Actually, we should rely on scroll event, and checking overflow manually after mounting the list to show/hide the indicators.

@bwindels
Copy link
Contributor Author

PR works well, just need some finish to also update when content is added/removed from a list, or the list is resized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Redesign Backlog
Prioritised Next (Ordered)
Development

No branches or pull requests

3 participants