#javascript #html #css #pagination
#javascript #HTML #css #разбивка на страницы
Вопрос:
html моей страницы выглядит следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>demo</title>
<style type="text/css">
div.page {
position: relative;
background-color: #F2F2F2;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
width: 794px;
height: 1123px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="form">
<div id="page-1" class="page"></div>
<div id="page-2" class="page"></div>
</div>
</body>
</html>
он имитирует стиль разбивки на страницы, подобный Word, содержимое динамически вставляется в каждый раздел страницы. если содержимое в разделе страницы переполнено, я хочу поместить переполненное содержимое в следующий раздел страницы (или создать новый, если следующая страница не существует). Итак, мне интересно, есть ли способ позволить div страницы инициировать событие при переполнении содержимого, чтобы я мог выполнить обратный цикл по элементам содержимого, чтобы решить, какие элементы следует поместить в div следующей страницы.
Любой толчок в правильном направлении окажет огромную помощь! Спасибо.
Комментарии:
1. Событие переполнения, предложенное Мэттом, поддерживается только в Firefox safari и Chrome. Кажется, не существует универсального кроссбраузерного способа для такого рода событий.
2. Если я не использую способ события, мне нужно проверять, происходило ли переполнение на странице каждый раз, когда я добавляю новый элемент и страницу рядом с ним и рядом рядом с that…….is возможно ли создать пользовательское событие? (Английский для меня не родной, поэтому грамматика может выглядеть немного странно)
3. Чтобы это было полезно, событие переполнения должно происходить асинхронно, например, после установки свойства innerHTML элемента. Это означает, что вы должны использовать обещания или обратные вызовы. Я хотел выяснить, приведет ли строка HTML к переполнению div, но единственный способ выяснить это — попробовать и измерить высоту. Но попытка этого означает необходимость асинхронного кодирования, что сложно внутри циклов. (Два вложенных асинхронных вызова requestAnimationFrame выполнят задание, если событие не является общедоступным.)
Ответ №1:
Вы можете получить clientHeight вложенного DIV, который является дочерним по отношению к вашему переполненному DIV. Другими словами…
<div style="overflow:auto">
<div id="actualContent" style="overflow:visible">
your content here
</div>
</div>
Измерьте высоту клиента внутреннего div и сравните ее с высотой клиента внешнего div.
Ответ №2:
ДА. Используйте событие «overflow».
window.addEventListener ("overflow", yourFunction, false);
Возможно, вам придется отключить overflow: hidden и установить для него значение overflow: auto (например), чтобы оно сработало, но как только это произойдет, вы можете установить overflow обратно в hidden и выполнить остальную часть процедуры разделения содержимого.
Я полагаю, что в Chrome и Safari есть аналогичное событие: «overflowchanged»
Комментарии:
1. Это событие — именно то, что я хочу, но IE его не поддерживает.
2. Работает только в Firefox.
3. Как указано @SupremeDolphin, это нестандартно и работает только в Firefox. Смотрите ( developer.mozilla.org/en-US/docs/Web/API/Element/overflow_event )
Ответ №3:
Я бы использовал дополнительный div, который расположен за пределами экрана и имеет точно такое же содержимое, что и ваша страница div (вы должны постоянно обновлять это). Единственное отличие заключается в том, что дополнительный div не имеет «overflow: hidden».
Теперь проверьте, есть ли разница в высоте между двумя разделами, и если да, то содержимое переполнено!
Комментарии:
1. Спасибо за помощь. Но я думаю, что хранить точную копию каждой страницы div немного неэффективно.
2. Вам не обязательно сохранять его. Просто заполните его, когда вам это нужно, и выбросьте после этого. Div вам нужен только тогда, когда вам нужно проверить размеры… Если вы не возражаете против возможного небольшого мерцания, вы могли бы даже на крошечный момент удалить «overflow: hidden;» в исходном div, проверить размеры, а затем немедленно изменить его обратно.
Ответ №4:
Давайте внесем ясность в следующие определения.
View — видимая область или поле, содержащее содержимое
содержимое — переполненный контент.
Для обнаружения переполнения проверьте разницу между представлением. offsetHeight и содержимое. offsetHeight и ваш переполненный контент — это вычитаемое значение.
Ответ №5:
У меня есть решение этого вопроса. Но это работает только во встроенном CSS.
<!DOCTYPE html>
<html>
<head>
<style>
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 50%;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>The overflow property controls what happens to content that is too big to fit into an area.</p>
<div id="overflowTest" style="overflow: scroll">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<script>
const overflowDetector=x=>x.style.overflow;
var overflow = overflowDetector(document.querySelector("#overflowTest"));
(overflow === "scroll")?alert("overflow : scroll"):alert("overflow : " overflow);
</script>
</body>
</html> Комментарии:
1. Этот ответ, как и другие, не учитывает, что переполнение происходит при изменении содержимого, поэтому существует асинхронная задержка перед обнаружением переполнения, поскольку рендеринг не происходит синхронно.