Is Scroll-Snap Worth to Be Considred for Story River?

#1

Sometimes I like to have tiddlers in strory river snaps to the top! Scroll-Snap is a CSS tecnique all browsers (except IE11) support it! It is worth to be considred for TW story river?

A proof for a div in single tiddler:

715_msedge

This has been written with five lines of CSS

1 Like
#2

Ref: CSS Scroll Snap - CSS: Cascading Style Sheets | MDN (mozilla.org)

Example: Practical CSS Scroll Snapping | CSS-Tricks - CSS-Tricks

#3

Yes.

Scroll-Snap is quite sophisticated.
It is particularly useful with very wide pages where you want smooth jumps horizontally.

In TW it is very useful IF the user needs many Tiddlers open.
It soothes use.

I’m not so clear on how it plays on mobile?

Just a comment
TT

#4

It might be useful when most tiddlers are shorter than the screen height.

I think of this as being analogous to snap behaviour when using a grid in graphic vector software or CAD software - in some situations it is very useful to have snap to grid or nearest anchor but you have to be able to turn it off quickly and easily.

Any form of snapping is making decisions on your behalf to make life easier but it is also a reduction in choice and control - so to avoid frustration it is essential that the turn off mechanism is very quick, and easy to get to. Think of an image longer than screen height on mobile and your wish to scroll to a position where you can simultaneously see points A and B in the image.

#5

Mohammad,

Very nice! Since your reference and example links are not TiddlyWiki specific, could you just share those 5 lines of code, including exactly where you put them in your wiki, and how (in TiddlyWiki) to fine-tune what counts as an “anchor” for the snapping effect?

-Springer

1 Like
#6

The code are these ones

.tid-container {
  height: 360px; /* change to 100% */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.tid-container > div {
  height: 100%;
  scroll-snap-align: center;
}

But to give a try I made a macro and few tiddlers to work with! Also added skins to tiddlers

  1. download scroll-snap-Tiddlywiki.json (2.9 KB)
  2. drag and rop into https://tiddlywiki.com/
  3. open scroll-snap-ii/macro
2 Likes