Печать прокручиваемых Div
У меня есть веб-страница, которая отображает длинный линейный график внутри div с overflow-x: scroll. Это хорошо работает как веб-страница, позволяя прокручивать график вперед и назад.
Однако при печати страницы положение прокрутки сбрасывается до нуля. Есть ли способ преодолеть это?
Ответы 4
Я думаю, вам придется указать альтернативный CSS для печати, где вам как-то нужно удалить переполнение:
<link rel = "stylesheet" type = "text/css” href = "sheet.css" media = "print" />
Однако, может быть, есть подход с помощью JavaScript или даже Flash? Если я правильно понимаю, вы хотите, чтобы напечаталась только часть графика (та, которую «выбрал» пользователь?), А не всю? Я почти уверен, что это невозможно с обычным HTML / CSS, но я твердо верю, что Flash или, возможно, JavaScript / AJAX (чтобы загружать только часть изображения за раз) могут решить эту проблему.
Простым подходом было бы иметь некоторый javascript, который отправляет обратно на вашу страницу с выбранной пользователем позицией прокрутки на ссылке, говорящей что-то вроде «настройка для печати». Затем серверная сторона возвращает страницу с графиком, относительно позиционированным в позиции прокрутки с помощью overflow:hidden, чтобы обрезать график соответствующим образом.
Конечно, это не сработает для пользователей с отключенным javascript - если вы хотите поддержать это, вам потребуется, чтобы пользователь указал позицию прокрутки в чем-то вроде элемента ввода текста и кнопки отправки, которую вы скрыли с помощью javascript, когда она включена.
Вы не можете сделать это в простом CSS - вам придется повторно реализовать прокрутку, используя выбранную вами библиотеку пользовательского интерфейса Javascript, чтобы получить то, что вы хотите.
Пользовательское состояние полосы прокрутки не используется при печати (подумайте об этом, если вы прокрутите страницу на 3 экрана и нажмете «печать», имеет ли смысл браузеру печатать только ту часть документа, которая находится в вашем окно в то время?). Однако, если вы используете JS, который фактически управляет DOM (т.е. устанавливает смещение x-позиции на -293, если человек прокрутил вправо 293 пикселя, как style = "left: -293px; overflow: hidden;" в CSS), тогда он будет отображаться как таковой в печатных документах.
Я предлагаю, если графики не имеют ширины очень, просто пропустите всю эту ерунду и используйте таблицу стилей принтера с width: 100% для <div> графика, чтобы график просто уменьшился до ширины страницы.
Вам нужно временно превратить положение прокрутки родительского элемента в отрицательное поле дочернего элемента и поместить этого родителя как overflow: hidden.
Вот как это сделать в Javascript (это единственный способ, css не может этого сделать)
Обратите внимание, что вам понадобится что-то для выполнения printDone () после печати, чтобы восстановить все как обычно. Вы можете вызвать его с помощью события колеса, например. потому что у пользователя возникнут проблемы только при попытке прокрутки. Или вы можете просто поставить кнопку, как я, и показывать ее только при вызове printGo ().
<html>
<head>
<style>
#wrapper {
width:800px;
overflow-x:scroll;
}
#content {
width:2000px;
border:2px solid red;
}
@media print { /* This overwrites the css when printing */
#wrapper {
overflow-x:hidden;
}
}
</style>
</head>
<body>
<a href = "#" onclick = "printGo()">Print</a><br>
<a href = "#" onclick = "printDone()">I'm done printing!</a>
<div id=wrapper>
<div id=content>
Hello this is my content.
</div>
</div>
<script>
var wrapper = document.getElementById('wrapper');
var content = document.getElementById('content');
var scrollPos;
function printGo(){
scrollPos = wrapper.scrollLeft; // Save scroll position
wrapper.scrollLeft = 0;
wrapper.style.overflowX = 'hidden'; // Optional since css does it
content.style.marginLeft = -scrollPos+'px'; // Put it as a negative margin of child instead
window.print();
}
function printDone(){
wrapper.scrollLeft = scrollPos; // Restore scroll position
wrapper.style.overflowX = 'scroll'; // Optional since css does it
content.style.marginLeft = '';
}
</script>
</body></html>