Edit: any future reader of this thread should do well to scroll down to the posts by telumire who came up with the superior variant.
So, fellow @StSasked for a scrollbar type indicator. I looked up the pure CSS solutions on the web, concluded they’re basically not usable for TW but their core idea is, so I did a lot of trial-and-error and here is the pure CSS scroll indicator formally known as…
ooh! I really like this. This is the first time I have seen anything like this for TiddlyWiki. Sometimes one needs a little extra motivation to slog through long texts, and a progress indicator shows just how much is left to go, that the journey is doable, and that can be just enough to push a person to persevere. Great job @twMat!
I like it very much. One question though. I make extensive use of Mohammad’s Refnotes plugin for his footnotes and have found with my own trials and your stylesheet that the tooltips for the footnotes are cutoff by the div. Are you aware of any work around for this at all?
I notice it not going to 100% but I am not fussed with that.
Would it be hard to indicate “end of text”, “The End” “Fin” - maybe not with this method?.
I wanted to increase the height to 80vh And see I will need to alter other values, perhaps a base value and a few calculations could make it more adaptable. A version below.
Since we can use a middle scroll button, there may be a way to hide the scroll bar, but we would still need some kind of indicator so the user knows the need to scroll for more content.
Here is it adapted for 80vh which for others is 80% of View window, easy to do given the comments.
[data-tags*="scrollbar"] .tc-tiddler-body {
max-height:80vh; /* max height of scroll area*/
overflow-y:scroll;
}
[data-tags*="scrollbar"] .tc-tiddler-body scrollbar {
position:relative;
z-index:0;
display:block;
}
[data-tags*="scrollbar"] .tc-tiddler-body scrollbar:before {
content:"-";
position:sticky;
top:0;
margin-top:-1.3em; /* needed... but not sure why */
border:1px solid black;
outline:82vh solid white; /* cover needs to be adjusted to scroll area height */
display:block;
z-index:-2;
line-height:4px; /*scrollbar thickness*/
}
[data-tags*="scrollbar"] .tc-tiddler-body scrollbar:after {
content:"";
position:absolute;
display:block;
background: linear-gradient(to top right, blue 50%, transparent 50%);
top:-10px;
bottom:76vh; /* needs adjustment to scroll area height */
width:100%;
z-index:-3;
}
Much improved. No need to tag the tiddler and you can now have tiddler content above and below scrolly.
Unfortunately, as you’ll see when you scroll in the demo, e.g a codeblock with its gray background will cover scrolly. I think this is unavoidable because the text (and thus the codeblock) necessarily is in front of (i.e has higher z-index) than the indicator.
@StS - transparent tiddler background is probably impossible for this solution. The very key component in this all is to put that triangle behind the text because that is the scrolly bar, so it can’t be transparent.
The use of a tiddler tag is gone but the only way I can imagine to rid the wrapping would be to use the whole text area, (plus adding a wrapping element around it in the tiddler body viewtemplate). Then you could not add stuff above or below the scrollarea, in the tiddlers body. This is a pretty cool idea for tiddlers that should be full screen size… but that is not specific for the whole scroll indicator concept.
I did now make it so you can have the bar at bottom though, see instrux in demo.
Feel free to dabble around. These things are so fringe CSS, at least to me, that I barely know what I’m doing myself.
And it solves the nagging feeling I’ve had which is “What is actually the justification for this to begin with? I’m creating a little window that already has a little scrollbar on the right side to show where I’ve scrolled to”. But your design makes so much more sense! And so simple to apply! Well done!
This is wonderful! Thank you @telumire
Just some minor comments!
When you get the end of tiddler in view, the orange bar gets 100% of width! so far so good!
Then you scroll down to the next tiddler and you have part of previous tiddler in view, but you see the orange bar disappeared! EXpected behaviour: The orange bar should stay visible as long as the remaining bottom part of tiddler is in view.
See screenshot, note to orange bar when it gets 100% of width
I know, and it’s a bit frustrating .. This is because the clip-path triangle end a bit before the end of the tiddler, in order to see the scrollbar take the full width when the bottom of the tiddler come into view.
With ?% depending of the height of the tiddler. In theory I could calculate this with calc(), but it doesnt work. I think this is because the output of calc is not a %.
Now the next improvement that could be made is to hide the scrollbar on tiddlers with a height lesser than 100vh, but I think this would require the use of CSS Container Queries. Hopefully it will be available soon! (or maybe with some elaborate calc operations..)
- you did a great job, thanks a lot!
