Scroll Indicator

#1

Hello,

I found this very useful feature for long text tiddlers:

How can such a code be implemented in TW?

Thanks
Stefan

1 Like
Presenting: Scrolly - the scroll indicator
#2

I have scrollbars in each window which helps.

If you put the following in a tiddler and tag it

$:/tags/Stylesheet

.tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:80vh; overflow-y:auto; }

1 Like
#3

Hello @Ste_W,
thanks for feedback - I’m using

.tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:80vh; overflow-y:auto; }

But the behavior of the “Scroll Indicator” is a little bit different.

Regards
Stefan

#4

I should probably read links before replying :slight_smile:

#5

A proper solution would require javascript, I’m not proficient enough to provide that BUT I know of a workaround using CSS only, with a caveat: the end of the scroll indicator can’t be a straight line.

The trick is to display a triangle behind the content you are scrolling, and show only a portion of this triangle. As you scroll down, the triangle goes “up”, and the visible section goes wider and wider until your reach the base, thus filling the meter.

Here’s a codepen using this trick: https://codepen.io/dsr/pen/QWydRRL

The @scroll-timeline rule will allow you to create a true progress bar with CSS only, but it’s very experimental and only usable in chrome canary for now, with the flag --enable-blink-features=CSSScrollTimeline.

See this video for a demo (the @scroll-timeline syntax has been deprecated, but the scroll-linked animations spec is still being worked on. Chrome is looking to ship late this year or early next year, and FF is actively working on it as well.):

#6

Thanks for feedback:

The exampe has a java script - but how can that be implemented in TW?
The idea is to have it for each tiddler (when needed) instead of the scrollbar on the right side.
If more than one tiddler open, you have only one “overall” scrollbar instead of two.

I’ve slightly modified the CSS code (W3Schools Tryit Editor) to have the scroll indicator on bottom - with java script:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
}

.progress-container {
  width: 100%;
  height: 4px;
}

.progress-bar {
  height: 8px;
  background: red;
  width: 0%;
}

.content {
  margin: 50px auto 0 auto;
  width: 80%;
}
</style>
</head>
<body>

<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

<div class="content">
  <h3>Scroll Down to See The Effect</h3>
  <p>We have created a "progress bar" to <b>show how far a page has been scrolled</b>.</p>
  <p>It also <b>works when you scroll back up</b>.</p>
  <p>It is even <b>responsive</b>! Resize the browser window to see the effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<script>
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

</body>
</html>
Presenting: Scrolly - the scroll indicator
#7

IMO this should be a job for the event catcher widget, but currently it’s not able to handle this, see this thread: How can I get the scroll position with the eventcatcher widget? - #5 by saqimtiaz

If I find a solution I’ll let you know :slight_smile: