python - 制作滚动条但不一致

Question

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

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, 0), bar)

    if mousePressed and bar.collidepoint(mousePos) and not scrollStart:
        scrollStart = True
        scrollPosY = mousePos[1]
        
    if scrollStart:
        pygame.draw.rect(window, (255, 0, 0), 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, (0, 0, 0), (10, y, 500, 100), 3)
        surf = font.render(f'{i}', True, (0, 0, 0))
        window.blit(surf, (100, y + 40))
        
    pygame.display.flip()

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

我认为这是问题所在:

if scrollStart:
        pygame.draw.rect(window, (255, 0, 0), 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, (255, 0, 0), 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]

这解决了这个问题，但现在移动感觉不自然(滚动条正在缓慢移动或按钮正在快速移动)。
所以我的问题是:有没有办法让它们在以不同速度移动的同时保持一致？

Answer 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, 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

    # [...]