Печать прокручиваемых разделов - PullRequest
Новая
       6

Печать прокручиваемых разделов

1 голос
/ 25 октября 2008

У меня есть веб-страница, которая отображает длинную линейную диаграмму внутри div с overflow-x: scroll. Это хорошо работает как веб-страница, позволяющая использовать прокрутку назад и вперед по графику.

Однако при печати страницы положение прокрутки сбрасывается на ноль. Есть ли способ преодолеть это?

Ответы [ 4 ]

2 голосов
/ 25 октября 2008

Я думаю, вам нужно указать альтернативный CSS для печати, где вам каким-то образом нужно удалить переполнение: 

<link rel="stylesheet" type="text/css” href="sheet.css" media="print" />

Однако, может быть, есть подход с JavaScript или даже Flash? Если я правильно понимаю, вы хотите, чтобы была напечатана только часть графика («выбранная» пользователем?), А не полная? Я почти уверен, что это невозможно с простым HTML / CSS, но я твердо верю, что Flash или, возможно, JavaScript / AJAX (чтобы загрузить только часть изображения за раз) могут решить эту проблему.

1 голос
/ 25 октября 2008

Вы не можете сделать это простым CSS - вам придется переопределить прокрутку, используя выбранную библиотеку Javascript UI, чтобы получить то, что вы хотите.

Пользовательское состояние полосы прокрутки не используется при печати (подумайте об этом, если вы прокручиваете страницу на 3 экрана вниз и нажимаете «печать», имеет ли смысл для браузера печатать только часть документа) это у тебя в окне в то время?). Однако, если вы используете JS, который на самом деле манипулирует DOM (то есть устанавливает смещение по оси x на -293, если человек прокрутил вправо на 293 пикселя, точно так же, как style="left: -293px; overflow: hidden;" в CSS), тогда оно будет отображаться как таковое в напечатанном документы.

Мое предложение таково: если графики не имеют ширины очень , просто пропустите всю эту ерунду и используйте таблицу стилей принтера с width: 100% для <div> графика, чтобы график просто уменьшался до ширины страницы.

0 голосов
/ 13 сентября 2016

Вам необходимо временно повернуть положение прокрутки родительского элемента в отрицательное поле дочернего элемента и поместить этот родительский элемент как переполнение: скрытый.

Вот как это сделать в 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>
0 голосов
/ 25 октября 2008

Простым подходом было бы иметь некоторый javascript, который отправляет обратно на вашу страницу с выбранной пользователем позицией прокрутки на ссылке, говоря что-то вроде «настройка для печати». Затем серверная сторона возвращает страницу с графиком, расположенным относительно позиции прокрутки с помощью overflow:hidden, чтобы соответствующим образом обрезать график.

Конечно, это не будет работать для пользователей с отключенным javascript - если вы хотите поддерживать это, вам нужно, чтобы пользователь указал положение прокрутки в чем-то вроде элемента ввода текста и кнопку отправки, которую вы скрыли при включении javascript.

...