javascript - HTML:使用 div 滚动条滚动变得很慢

Question

我目前正在使用 html 和 javascript 处理文件上传。我有没有滚动的 div 标签，能够显示图像并使用浏览器滚动条轻松向下滚动。现在我必须更改 div 标签以具有滚动条，但是当我这样做时，加载图像时界面开始无响应。

每次上传后，每张图片都会一张一张地加载。在上传之前，我在发送之前调整了图像的大小和方向。我尝试使用工作线程，但它无法处理 dom 等。

还有其他方法可以提高速度吗...

下面的代码从图像中获取 exif 并对图像进行定向

var loadingMetaImage = function (f, index, callback) {
        loadImage.parseMetaData(
        f,
        function (data) {
        if (data.exif)
        options = { canvas: true, orientation: data.exif.get('Orientation') };
        else
        options = { canvas: true };

        loadImage(
        f,
        function (img) {
        callback(img.toDataURL('image/jpeg', 1.0));
        },
        options);
        });
        };

调用上面代码并调整其大小的代码(逐步调整大小以获得更好的质量)

 loadingMetaImage(file.unprocessed, file.index, function (data) {
                        self.imageResize(data, function (result) {
                        self.files[file.index].datas = data;
                        uploadFile(file.index, result, file.name, file.realName, file.hasReader);
                        });
                        });

Answer 1

body{
    overflow: hidden;
}
.scroll-div{
    overflow-x: hidden;
    overflow-y: auto;
    height: 60%;
    width: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    background-color: antiquewhite;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
p{
    position: absolute;
    top: 70%;
    left: 10%;
    height: 40%;
    width: 80%;
    overflow: auto;
}

<div class='scroll-div'>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
    Some text <br><br>
</div>
<p>
The code there is:
<br><br>
body{<br>
&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;<br>
}<br>
.scroll-div{<br>
&nbsp;&nbsp;&nbsp;&nbsp;overflow-x: hidden;<br>
&nbsp;&nbsp;&nbsp;&nbsp;overflow-y: auto;<br>
&nbsp;&nbsp;&nbsp;&nbsp;/* Rest of styling */<br>
}<br>

</p>

忽略代码，您需要的一切都在“运行代码片段”按钮中。