一个非常，非常，非常大的 Div
对于我的一个项目(见 大画报或 Bigpicure.js GitHub 项目) ，我必须处理潜在的非常，非常，非常大的 <div>容器。
我知道我所使用的简单方法存在性能不佳的风险，但是我并不期望它只出现在 Chrome 上！
如果您测试 这一小页(见下面的代码) ，平移(单击 + 拖动)将是:
- Firefox 上的正常/平滑
- 即使在 Internet Explorer 上也是正常/平滑的
- 非常缓慢(几乎崩溃)的 Chrome！
当然，我可以添加一些代码(在我的项目中)来做到这一点，当你放大很多，字体可能非常非常大的文本将被隐藏。但还是 为什么火狐和 Internet Explorer 能正确处理它，而 Chrome 却不能？
是否有一种方法在 JavaScript，HTML，或 CSS 告诉浏览器 不去尝试呈现整个页面(这是10000像素宽在这里)的每一个动作？ (只呈现当前视图!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body {
overflow: hidden;
min-height: 100%; }
#container {
position: absolute;
min-height: 100%;
min-width: 100%; }
.text {
font-family: "Arial";
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
<div class="text" style="font-size: 600000px; left:10000px; top:10000px">Very big text</div>
</div>
<script>
var container = document.getElementById('container'), dragging = false, previousmouse;
container.x = 0; container.y = 0;
window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }
window.onmouseup = function() { dragging = false; }
window.ondragstart = function(e) { e.preventDefault(); }
window.onmousemove = function(e) {
if (dragging) {
container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
container.style.left = container.x + 'px'; container.style.top = container.y + 'px';
previousmouse = {x: e.pageX, y: e.pageY};
}
}
</script>
</body>
</html>
最佳答案