FramerJS

Question

我创建了一个可滚动区域，我正在尝试在图像下方添加一个滚动条（链接图像中的蓝色滚动条）

我目前拥有的可滚动区域代码。

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

Scroll

Answer 1

我认为您正在尝试制作一个滚动条，它随着滚动而移动并显示用户滚动了多远，对吧？下面是一些代码：

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

这里有一个完整的例子：https://framer.cloud/QtcLD

FramerJS - 带有滚动组件的水平滚动条

FramerJS - Horizontal scrollbar with the scroll component

coffeescript