FramerJS - Poziomy pasek przewijania z elementem przewijania - projekt, coffeescript, framerjs

Stworzyłem przewijany obszar i próbuję dodać pasek przewijania pod obrazami (niebieski pasek przewijania na połączonym obrazie)

Kod, który obecnie mam dla przewijalnego obszaru.

scroll = new ScrollComponent
opacity: 1.00
shadowBlur: 0
scroll.size = screen
Info.parent = scroll.content
scroll.scrollVertical = false

Zwój

Odpowiedzi:

Myślę, że próbujesz zrobić pasek przewijania, który przesuwa się wraz z przewijaniem i pokazuje, jak daleko przewinęła się użytkownik, prawda? Oto kod, jak to zrobić:

scrollbar.parent = scroll
# First make the width of the scrollbar relative to the size of the content.
scrollbar.width = (scroll.width / scroll.content.width) * scroll.width
# When the scroll is moved
scroll.onMove ->
# Calculate the width that we should scroll over
width = scroll.content.width - scroll.width
# Calculate the percentage that has currently been scrolled
percentage = scroll.scrollX / width
# Calculate how much space there for the scrollbar to move in
freeSpace = scroll.width - scrollbar.width
# Set the position of the scrollbar relative to the free space and the percentage scrolled
scrollbar.x = freeSpace * percentage

Pełny przykład znajduje się tutaj: https://framer.cloud/QtcLD