Untuk proyek saya (lihat BigPictu.re atau bigpicture.js proyek GitHub ), saya harus berurusan dengan potensi yang sangat, sangat, sangat besar <div>kontainer.
Saya tahu ada risiko kinerja yang buruk dengan pendekatan sederhana yang saya gunakan, tetapi saya tidak berharap sebagian besar terjadi dengan ... Chrome saja!
Jika Anda menguji halaman kecil ini (lihat kode di bawah), panning (klik + drag) akan menjadi:
- Normal / mulus di Firefox
- Normal / mulus bahkan di Internet Explorer
- Sangat lambat (hampir mogok) di Chrome!
Tentu saja, saya dapat menambahkan beberapa kode (dalam proyek saya) untuk melakukan itu ketika Anda banyak memperbesar, teks dengan ukuran font yang berpotensi sangat besar akan disembunyikan. Tapi tetap saja, mengapa Firefox dan Internet Explorer menanganinya dengan benar dan bukan Chrome?
Apakah ada cara dalam JavaScript, HTML, atau CSS untuk memberi tahu browser agar tidak mencoba merender seluruh halaman (yang lebarnya 10.000 piksel di sini) untuk setiap tindakan? (hanya membuat viewport saat ini!)
<!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>