制作滚动条但不一致

如何解决制作滚动条但不一致

所以我只是在尝试制作一个简单的滚动条。基本上，有一些按钮和一个滚动条。我想要做的就是在滚动条向下移动时向上移动按钮，如果滚动条向上移动则向下移动按钮。这是代码。

import pygame
import time

pygame.init()

window = pygame.display.set_mode((1200,600))
font = pygame.font.Font(pygame.font.get_default_font(),30)

ys = [] ##stores y-positions for the buttons
for y in range(25):
    ys.append((y * 101) + 100)

bar = pygame.Rect(550,100,10,(1 / len(ys) if len(ys) > 0 else 1) * 500)

scrollStart = False
updateButtons_Y = False

while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()

    mousepressed = pygame.mouse.get_pressed()[0]
    mousePos = pygame.mouse.get_pos()
            
    window.fill((255,255,255))

    if (bar.y < 100): bar.y = 100
    if (bar.y + bar.height) > 500: bar.y = 500 - bar.height    
    pygame.draw.rect(window,(0,0),bar)

    if mousepressed and bar.collidepoint(mousePos) and not scrollStart:
        scrollStart = True
        scrollPosY = mousePos[1]
        
    if scrollStart:
        pygame.draw.rect(window,(255,bar)
        bar.y += mousePos[1] - scrollPosY
        if bar.y > 100  and bar.y + bar.height < 500:   
            for i in range(len(ys)):
                ys[i] -= (mousePos[1] - scrollPosY) * len(ys) * 0.3
        scrollPosY = mousePos[1]

    if not mousepressed and scrollStart:
        scrollStart = False        

    for i,y in enumerate(ys):
        pygame.draw.rect(window,(10,y,500,100),3)
        surf = font.render(f'{i}',True,0))
        window.blit(surf,(100,y + 40))
        
    pygame.display.flip()

我遇到的问题是，在上下滚动时，它们逐渐错位。例如，这是它的开始方式。请注意左侧的栏和按钮如何在同一级别开始。

这是向上和向下滚动几次后的结果。

我认为这是问题所在：

if scrollStart:
        pygame.draw.rect(window,bar)
        bar.y += mousePos[1] - scrollPosY
        if bar.y > 100  and bar.y + bar.height < 500:   
            for i in range(len(ys)):
                ys[i] -= (mousePos[1] - scrollPosY) * len(ys) * 0.3
        scrollPosY = mousePos[1]

mousePos[1] - scrollPosY 根据鼠标移动的速度而变化，因此每帧的变化量是不一致的。为了解决这个问题，我将其替换为

if scrollStart:
        pygame.draw.rect(window,bar)
        if mousePos[1] - scrollPosY != 0:
            speed = 1
            direction = math.copysign(speed,mousePos[1] - scrollPosY)
            bar.y += direction 
            if bar.y > 100  and bar.y + bar.height < 500:
                for i in range(len(ys)):
                    ys[i] -= direction   
        scrollPosY = mousePos[1]

这解决了这个问题，但现在移动感觉不自然（滚动条移动缓慢或按钮移动快速）。

所以我的问题是：有没有办法让它们在以不同速度移动的同时保持一致？

解决方法

不移动列表元素的位置，而是计算新的位置：

ys[i] -= offset

ys[i] = position

计算条的相对位置：

scroll_height = (500 - 100) - bar.height 
scroll_rel = (bar.y - 100) / scroll_height

计算列表元素的偏移量：

box_height = (500 - 100)
list_height = 25 * 101
offset = (list_height - box_height) * scroll_rel

设置元素的新位置：

for i in range(len(ys)):
    ys[i] = (i * 101) + 100 - offset

变化：

while True:
   # [...]

   if scrollStart:

        bar.y = max(100,min(500 - bar.height,mousePos[1]))
        pygame.draw.rect(window,(255,0),bar)
        
        scroll_height = (500 - 100) - bar.height 
        scroll_rel = (bar.y - 100) / scroll_height
       
        box_height = (500 - 100)
        list_height = 25 * 101
        offset = (list_height - box_height) * scroll_rel
        
        for i in range(len(ys)):
            ys[i] = (i * 101) + 100 - offset

    # [...]