How can I get the scroll position with the eventcatcher widget?

Developers
#1

I’m trying to create a scroll indicator and I thought that maybe this could be done with the eventcatcher widget, but the scroll event doesnt work for some reason. Is that a bug, or am I doing something wrong ? Here’s my code:

\define scroll-action()
<$action-log event=<<event-type>>/>
\end

<$eventcatcher selector="*" $scroll=<<scroll-action>> tag="div" >

<$scrollable class='tc-scrollable'>
<ul>
<$list filter='[range[0],[100]]'>
<li>{{!!title}}</li>
</$list>
</ul>
</$scrollable>

</$eventcatcher>

<style>
.tc-scrollable{height: 400px;}
</style>

demo: Demos — Q&A and tools for tiddlywiki

The event listener seems to be applied, so why doesnt this works ?

image

EDIT: found a workaround

<$eventcatcher selector=".tc-scrollable *" $wheel=<<scroll-action>> tag="div" stopPropagation="never" >

I still would like to know how to use the scroll event so please let me know if you have any idea of why this happens.

#2

Scroll events at the element level do not bubble and therefore need to be attached directly to the element that the scrolling occurs in which isn’t possible with an event delegation pattern. The alternative would be to extend $eventcatcher to use “capture” which there hasn’t been a sold use case for as of yet, and may have performance ramifications to be considered.

Edit: you could try not using the scrollable widget and making the event catcher DIV scrollable using CSS.

1 Like
#3

Ah I see, I did not know that ! That make a lot of sense. I guess that keypress events also have this bubbling issue because I didnt manage to detect a press on the up and down keyboard arrows.

I will try that, thanks !

#4

Ok so I tried to use the eventcatcher itself to catch the scroll event and it worked, the scroll event does trigger!

The code now is :

\define scroll-action()
<$action-log />
<$action-setfield info=<<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>> />
\end

Scroll timestamp: {{!!info}}

<$eventcatcher matchSelector=":hover" $scroll=<<scroll-action>>  tag="ul" class="tc-scrollable">
<$list filter='[range[0],[100]]'><li>{{!!title}}</li></$list>
</$eventcatcher>

<style>.tc-scrollable{height: 400px;overflow:auto;}</style>

https://demos.tiddlyhost.com/#Scroll%20detection

However, I can’t access the scrollY or scrollTop property. I used the action-log widget to see the available variables and the only relevant data I could get was event-type and modifier. Am I missing something or is it just not possible with the current implementation of the event catcher ?

#5

The only variables provided by the eventcatcher widget are the ones described at https://tiddlywiki.com/#EventCatcherWidget

The current implementation for providing event variables isn’t particularly scaleable because the provision of each variable needs to be hardcoded into the widget. However, now that we have JSON filter operators in the core, the way to proceed would be to provide all event properties as a JSON object to the actions invoked, which can then query and extract properties as needed. Similarly I use a macro that returns other properties that I need, such as an elements width or height or scrollY. We need to find a flexible means to introduce the same affordance to the core.

A PR for this would be very welcome if someone has the skillset and opportunity to work on it.

1 Like
Scroll Indicator
#6

I see. I’ll let this thread as unsolved for now until I manage to find a solution or someone come up with one, thank you for taking the time to explain all of this !