-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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
use non-native scrollbars #869
Comments
The webkit style that I use for the ace editors of codeMagic is this: ::-webkit-scrollbar {
width: 0.5em;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
background: rgba(100, 100, 100, 0.8);
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(100, 100, 100, 0.4);
} It works for all the themes i've tested so far (and it should work for any theme because of the way I color the scrollbar parts). |
I'd suggest taking a look at https://github.com/noraesae/perfect-scrollbar; it's a really slim library that implements simple overlay-style scrollbars. |
@whitelynx I am unable to get perfect-scrollbar and ace working. Have you tried it? If yes, how? |
Haven't tried this yet, but my plan is to do something similar to what the Basically, the scrollbars are seperate DOM elements than the actual code editor, and they are synced with the code editor. I'm pretty sure this will work, but haven't tried it yet. |
Yes; you can see my implementation at https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editors (it's not a very clean implementation, but it works reasonably well) |
@whitelynx The link is broken, is there any up to date reference? |
@whitelynx I don't know how I missed it but could you please update the link? |
Sorry, not sure how that got messed up... It should be: https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editor.js |
Does the horizontal scrolling work? Vertical scrolling works fine but every time I try to scroll horizontally it jumps back. Some time later Alright I managed to fix it by changing the following in scrollbar.js:
The onScroll caused the scrollLeft to be reset to 0 each time. I noticed when I put a breakpoint in the setScrollLeft function it breaked twice, once with the correct value and once with 0. The latter was caused by the onScroll. |
@whitelynx Is there a live demo that we can try? |
@rocketinventor I've applied the same implementation that @whitelynx gave, with the onScroll fix I posted above over on http://drake7707.github.io/Typescript-Editor/ . This is the snippet I used which works fine for vertical scrolling, but doesn't seem to work completely on horizontal scrolling, but at least with the onScroll commented out I can still navigate with the keyboard so it's not such a big deal.
|
@drake7707 That demo works well for me for horizontal and vertical scrolling. However, there is no horizontal scrollbar showing. Why is that? |
@rocketinventor I'm not sure, it's probably the |
Yeah disregard my earlier comment. I didn't realize it was the |
@drake7707 this is buggly onScroll :( |
Just created CSS styled scrollbars here: https://github.com/ukandrewc/Ace-Scrollbars |
Sorry to bump an ancient issue here, but any ideas of this natively working with OverlayScrollbars, or perhaps a mechanism to override a built-in one? |
This issue has not received any attention in 1 year. If you want to keep this issue open, please leave a comment below and auto-close will be canceled. |
related to this PR #4905 |
rationale:
i'd say we need to make very basic thin scrollbar, without arrorws, autohiding and restoring starting scroll position when mouse is dragged far enough
related to #867
The text was updated successfully, but these errors were encountered: