Presenting: Scrolly - the scroll indicator

[twMat]

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 @StS asked 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…

• scrolly

I know, it is half baked and “wouldn’t it be better if…”, yes it would! But it should give a base for anyone wanting to fiddle more.

[DaveGifford]

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!

[HistoryBuff]

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?

[TW_Tones]

This is great for those tiddlers are long in a wiki of shorter tiddlers.

• Simple, intuitive and targeted.

Thank you @twMat It is usable “out of the box”

Some notes;

• 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;
}

Good stuff.

[twMat]

Updated scrolly

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]

Thanks @twMat for your great job.

There are some limitations to Scroll Indicator (maybe only for me!)

• I’m using transparent background. Apply this here

outline:52vh solid transparent;

will result in:

• don’t want to tag each tiddler with scrollbar and wrap the content with <scrollbar>...</scrollbar>
• prefer to have the scroll indicator on the bottom of the tiddler
• normal scrollbar of the tiddler (right side) should disappear when using scroll indicator - if possible

[StS]

Missing image from previous post:

[pmario]

@twMat

Updated scrolly

Doesn’t work for me using FireFox

[twMat]

Updated (note that the wrapping element names have changed so if you’ve applied it to any tiddlers then you must change them)

@pmario - I think it should work in FF now.

@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.

[telumire]

@twMat

@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.

Maybe you could use a mask or a clip path to only show part of the background triangle ?

[twMat]

Ah, that’s an interesting idea! I won’t put more effort into this right now though but might come back to it. Thanks @telumire

[telumire]

Try this:

In a tiddler with the tag $:/tags/Stylesheet :

.tc-tiddler-body{
position:relative;
}
.scroll-indicator{
 position:absolute;
 inset:-1em 0 0 0;
height:calc(100% - 100vh + 42px + 42px + 28px);
clip-path: polygon(0 0, 0% 100%, 100% 100%);

/*if using position sticky, require a background (dont know why), position fixed doesnt*/

/* background:rgba(0,0,0,.01);*/
}
.scroll-indicator:after{
content:"";
display:block;
position: fixed;
/*position:sticky;*/
background:<<colour primary>>;
inset:0;
height:10px;
}

Then you can add a scroll indicator to any tiddler like this :

<div class="scroll-indicator"/>

Tiddler content here..

Or, you can create a viewtemplate and add the scrollbar to every tiddler with a specific tag, etc.

Let me know if it works/doesnt works.

Demo: Demos — Q&A and tools for tiddlywiki

Not perfect either but it should works great if you have content after the current tiddler.

[twMat]

Hah! Brilliant!!!

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!

[telumire]

I just found something that is even better - no html needed !

.tc-tiddler-frame.scroll-indicator:before{
  content:"";
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  background: linear-gradient(<<color tiddler-title-foreground>> 0 0);
  background-size:100% 5px;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:absolute;
  inset:0;
height:calc(100% - 100vh + 42px + 42px + 28px);
  z-index:550;
pointer-events:none;
}

Now you just need to add a field class set to “scroll-indicator” on any tiddler, and a progress bar will be displayed.

https://demos.tiddlyhost.com/#Scrollbar%20indicator%20(work%20best%20on%20very%20long%20tiddler):[[Scrollbar%20indicator%20(work%20best%20on%20very%20long%20tiddler)]]%20[[Scrollbar%20indicator%20v4]]

[Mohammad]

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

A side note:

The Wikitext in Demos — Q&A and tools for tiddlywiki can be shortened like this

\define longlm(n:"10") <$list filter="[range[1,$n$]]"><$transclude tiddler=Lorem mode=block/></$list>

<<longlm 50>>

[StS]

@telumire: This works like a charm - you did a great job, thanks a lot!

To make it complete independent - how do I add by default the field “scroll-indicator”

• to each new tiddler?
• to all existing tiddlers except system tiddlers?

[telumire]

@Mohammad

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.

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.

What you see is this:

To keep the scrollbar visible, I would need to use a clip path in this shape :

clip-path: polygon(100% ?%, 100% 100%, 0 100%, 0 0);

Which translate to

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 %.

[telumire]

Nevermind, I found a solution ! The solution was simply to use calc for each point of the clip path. Here’s the final CSS:

.tc-tiddler-frame:not(.tc-tiddler-system):before{
  content:"";
  clip-path:polygon(calc(100%) calc(100% - 100vh - 42px), calc(100%) calc(100%), 0 calc(100%), 0 0);
  background: linear-gradient(<<color tiddler-title-foreground>> 0 0);
  background-size:100% 5px;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:absolute;
  inset:0;
  z-index:550;
pointer-events:none;
}

I’m very happy with the final result:

Demo: Demos — Q&A and tools for tiddlywiki

@StS

To make it complete independent - how do I add by default the field “scroll-indicator”

• to each new tiddler?
• to all existing tiddlers except system tiddlers?

You can modify the css like this:

.tc-tiddler-frame:not(.tc-tiddler-system):before{
  content:"";
  clip-path:polygon(calc(100%) calc(100% - 100vh - 42px), calc(100%) calc(100%), 0 calc(100%), 0 0);
  background: linear-gradient(<<color tiddler-title-foreground>> 0 0);
  background-size:100% 5px;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:absolute;
  inset:0;
  z-index:550;
pointer-events:none;
}

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…)

[StS]

What else is needed to exclude in CSS — .tc-tiddler-frame:not(.tc-tiddler-system):before{ — to get PrintRiver running?

[telumire]

Oh, nice catch! You can use a mediaquery to only enable the scroll indicator when we are not printing the page :

@media not print {

.tc-tiddler-frame:not(.tc-tiddler-system):before{
  content:"";
  clip-path:polygon(calc(100%) calc(100% - 100vh - 42px), calc(100%) calc(100%), 0 calc(100%), 0 0);
  background: linear-gradient(<<color tiddler-title-foreground>> 0 0);
  background-size:100% 5px;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:absolute;
  inset:0;
  z-index:550;
pointer-events:none;
}

}

https://demos.tiddlyhost.com/#Scrollbar%20indicator%20demo