Đối với một dự án của tôi (xem BigPictu.re hoặc bigpicture.js dự án GitHub ), tôi phải đối phó với khả năng rất, rất, rất lớn <div>chứa.
Tôi biết rằng có nguy cơ hoạt động kém hiệu quả với cách tiếp cận đơn giản mà tôi sử dụng, nhưng tôi không ngờ rằng nó hầu như chỉ xuất hiện với ... Chrome!
Nếu bạn kiểm tra trang nhỏ này (xem mã bên dưới), việc di chuyển (nhấp + kéo) sẽ là:
- Bình thường / mượt mà trên Firefox
- Bình thường / mượt mà ngay cả trên Internet Explorer
- Rất chậm (gần như bị lỗi) trên Chrome!
Tất nhiên, tôi có thể thêm một số mã (trong dự án của tôi) để làm điều đó khi bạn phóng to nhiều, văn bản có kích thước phông chữ rất lớn có thể sẽ bị ẩn. Tuy nhiên, tại sao Firefox và Internet Explorer lại xử lý nó một cách chính xác mà không phải Chrome?
Có cách nào trong JavaScript, HTML hoặc CSS để yêu cầu trình duyệt không cố gắng hiển thị toàn bộ trang (ở đây rộng 10000 pixel) cho mọi hành động không? (chỉ hiển thị khung nhìn hiện tại!)
<!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>