HTML：使用 div 滚动条滚动变慢答案

【问题标题】：HTML: Scrolling become slow using div scrollbarHTML：使用 div 滚动条滚动变慢
【发布时间】：2015-04-15 01:24:02
【问题描述】：

我目前正在使用 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);
                        });
                        });

【问题讨论】：

我们有可能看到这个吗？你能显示在某处运行的代码吗？
Simon，你的目标浏览器是什么？多年前，在使用 IE 6 时，我发现滚动 div 在内容很多时的性能非常糟糕。当时，我们确定的解决方案是将内容呈现在 iframe 中。当然，这不是一个理想的解决方案，但性能要好得多。
我正在使用 chrome 但我认为是因为调整图像大小和做方向导致浏览器无响应...与浏览器滚动条相比，div 滚动条更加明显。

标签： javascript html worker vertical-scrolling

【解决方案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>

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

【讨论】：