javascript - Safari 滚动故障

Question

我正在为一个网站开发类似终端的用户界面，其中添加的内容具有打字机效果(使用 typed js )。内容总是添加在页面底部，其高度不断变化，为了让用户始终关注新闻信息，我像这样自动滚动到底部:

        var h = 0;
        window.setInterval(function(){
            if ($(document).outerHeight() != h){
                $(document).scrollTop( $(document).outerHeight() );
                h = $(document).outerHeight();
            }
        }, 10);

代码有效，但我总是在 Safari 中遇到故障，在加载图像后，自动滚动变得全部故障且无响应。我认为这可能与未集成在 div 高度中的图像高度有关，但老实说，我不知道。这东西在所有其他浏览器上都能完美运行。你们有没有遇到过这种故障？你知道是什么原因造成的吗？

我上传了页面的演示 here

谢谢大家

Answer 1

根据我在查看开发工具和 typed.js 源代码时看到的情况，每个添加(键入)的新字符都会替换整个键入的 div:

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

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

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

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