Для моего проекта (см. BigPicture.bi или bigpicture.js GitHub project), я должен иметь дело с потенциально очень, очень, очень большим контейнером <div>.Очень, очень, очень большой div
Я знал, что существует риск плохой работы с простым подходом, который я использую, но я не ожидал, что он будет в основном присутствовать ... Только Chrome!
Если тест this small page (см код ниже), панорамирование (нажмите + перетаскивание) будет:
- Normal/гладкая на Firefox
- Normal/гладкая даже на Internet Explorer
- Очень медленно (почти сбой) на Chrome!
Конечно, я мог бы добавить код (в моем проекте), чтобы сделать это, когда вы сильно увеличились, текст с потенциально очень большим шрифтом будет скрыт. Но все же, Почему Firefox и Интернет Проводник правильно обрабатывает его, а не 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>
[OT] 600K размер шрифта. Должна быть функция доступности для людей с * очень * плохим зрением? ;-) – geert3
@ geert3 Я уверен, что это для лунного орбитального веб-браузера –
Прекрасно работает для меня на Chrome 38.0.2125.111 m. – FreeAsInBeer