Question

我正在为一个网站添加类似终端的用户界面，其中内容添加了打字机效果（使用typed js）。内容总是添加在页面底部，其高度不断变化，为了让用户始终关注新闻信息，我自动滚动到底部，如下所示：

from Tkinter import *

def foo(event):
    global m

    key = event.char
    if key.upper() == 'P':
        c.move(a1,0,5)
        c.itemconfig(a1, fill='yellow')
    elif key.upper() == 'H':
        c.move(a1,0,-5)
        c.itemconfig(a1, fill='blue')
    elif key.upper() == 'K':
        c.move(a1,-5,0)
        c.itemconfig(a1, fill='white')
    elif key.upper() == 'M':
        c.move(a1,5,0)
        c.itemconfig(a1, fill='green')
    elif key == '\x1b':
        root.destroy()
    c.after_cancel(m)
    m = c.after(1000, move)

def move():
    c.move(a1, 0, 2)
    m = c.after(1000, move)

root = Tk()
c = Canvas(root,height=900,width=700)
c.pack()
p0 = (450,450)
p1 = (460,460)
a1 = c.create_oval(p0,p1,fill='red')
m = root.after(1000, move)
root.bind('<Key>', foo)
root.mainloop()

代码可以正常工作，但我总是在Safari中出现故障，在加载图像后，自动滚动变得一闪而过，反应迟钝。我认为这可能与未集成在div高度的图像高度有关，但老实说，我不知道。这个东西在所有其他浏览器上都很完美。这种故障有没有发生在你们中间？你知道是什么原因造成的吗？

我上传了页面here

的演示

谢谢大家。

Answer 1

从我看到开发工具和typed.js源代码时可以看到，为添加的每个新字符（键入）替换整个类型的div：

(self.el.html(nextString);).

这会导致图像一遍又一遍地重新加载。查看开发工具中的网络面板，查看一次又一次加载的所有图像。这根本不理想。

您可以选择在css中设置图像的宽度和高度，或者在html标记中添加宽度和高度。这将解决您的滚动问题。但是每次加载时图像仍会闪烁。

您最好的选择是修改键入的代码，将每个字符和每个图像附加到父元素，而不是每次都替换其内容。

Safari滚动故障

1 个答案: