整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

动手练一练,用纯 CSS 制作一款侧滑显示留言面板的网页组件


家好,不知道你们是否和我一样存在这样的困惑呢,虽然css入门容易,但是其内容太多,好多属性看了似是而非,觉得自己看懂了,到自己用的时候又很犯难了,看到漂亮的效果还是无从下手,这主要还是自己对新属性实践太少了,不能进行灵活应用,CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径,和JS编程一样,要重视对待,要多看和多练,因为现在的CSS不再是以前的CSS啦。

比如这两本书《 CSS 权威指南第四版》,1000多页,买了好几个月我到现在还没看完,文字实在太枯燥了,看完了忘,忘了继续看,实在看不下去,不知道大家有没有同样的感受呢?

好了,废话不多说,今天我们要做的一个案例就是做一个常见的例子:在不少网站右侧都有一个固定浮动的留言图标,我们点击这个图标,就会侧滑显示留言内容面板。你也许会说这个不简单吗,使用JQ就能轻松实现,但是我想说的,为了网站的性能,能用CSS实现的尽量不要用JS,因为现在CSS已足够强大。

今天这个例子,我们将使用纯CSS实现这个效果,这里我们将用到” CSS checkbox hack“的技术,效果如下图所示:


一、创建 HTML 结构

基于上面的效果图,我们要创建三个元素,一个 checkbox 元素以及对应的 label 标记,和一个表单面板元素。

这里用到了一个 CSS 特性值得大家关注下:<label> 标签的 for 属性用于指定与哪个表单元素进行关联,扩大表单元素的点击区域,我们点击 label 元素标记,其对应的表单元素将会被聚焦选中。

这个特性是我们实现这个案例的技巧之一,再结合 CSS checkbox 的伪类选择器进行留言面板的显示与隐藏,这样我们就可以摆脱 JS 来实现这个案例。

基于以上思路 ,我们开始动手吧,首先我们先放置 checkbox,和其对应的 label,最后添加表单面板和相关的表单元素。

我们将通过表单的 id 属性与表单中label元素的 for 值与其关联,最终我们完成了 HTML 结构如下段代码所示:

<input type="checkbox" id="mycheckbox">
<label for="mycheckbox" class="feedback-label">FEEDBACK</label>
<form class="form">
  <div>
    <label for="fullname">Full Name</label>
    <input type="text" id="fullname">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email">
  </div>
  <div>
    <label for="comment">Comment</label>
    <textarea id="comment"></textarea>
  </div>
  <div>
    <button type="submit">Send</button>
  </div>
</form>

完成后的效果图如下:

二、定义基础的样式

现在我们开始添加一些基础的CSS的式,这里我们用到了CSS自定义变量,方便我们全局修改,还有一些 reset 规则,和表单的基础规则样式,示例代码如下:

:root {
  --white: white;
  --gradient: linear-gradient(-45deg, #FFA600 0%, #FF5E03 50%);
  --form: #eeefef;
  --border-radius: 4px;
  --form-width: 500px;
  --form-mob-width: 320px;
}
 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 20px/1.5 sans-serif;
  background: var(--white);
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin-top: 20vh;
}
 
button,
label {
  cursor: pointer;
}
 
label {
  display: block;
}
 
button,
input,
textarea {
  font-family: inherit;
  font-size: 100%;
  border: none;
}
 
textarea {
  resize: none;
}

三、 定义表单元素相关样式

1、由于 checkbox 这个元素在案例中无需显示,我们只是用其的伪类特性结合 label 控制留言面板的显示与隐藏,因此我们需要将其移出可视区域,记住这里不能用隐藏属性(display:none)。示例代码如下:

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

2、接下来,我们需要添加这些CSS操作:

  • 使用 fix 属性将 checkbox 对应的 label 标签元素固定在右侧的中央。
  • 垂直先显示”FEEDBACK“文本。
  • 隐藏表单面板,我们这里将其往右移动其宽度的 100% 的距离,并垂直居中。

对应的CSS代码如下:

/*CUSTOM VARIABLES HERE*/
.feedback-label,
.form {
  position: fixed;
  top: 50%;
  right: 0;
}
 
.feedback-label {
  transform-origin: top right;
  transform: rotate(-90deg) translate(50%, -100%);
  z-index: 2;
}
 
.form {
  width: var(--form-width);
  max-height: 90vh;
  transform: translate(100%, -50%);
  padding: 30px;
  overflow: auto;
  background: var(--form);
  z-index: 1;
}

小提示:

1、这里需要强调的是 feedback-label 样式,在其垂直变换时,我们先逆时针进行了旋转,其 x ,y 轴的方向也是随着旋转的,所以是translate(50%, -100%),将其垂直居中。

2、在 form 样式里,我们使用 transform 方法,translate(100%, -50%) 将其移出页面显示区域

3、我们继续,大家不要着急,马上就快完成了,我们需要将页面弄的漂亮些,添加一些样式,示例代码如下:

/*CUSTOM VARIABLES HERE*/
 
.feedback-label,
.form input,
.form textarea,
.form button {
  border-radius: var(--border-radius);
}
 
.feedback-label,
.form button {
  background: var(--gradient);
  color: var(--white);
}
 
.feedback-label:hover,
.form button:hover {
  filter: hue-rotate(-45deg);
}
 
.feedback-label {
  padding: 5px 10px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
 
form div:not(:last-child) {
  margin-bottom: 20px;
}
 
form div:last-child {
  text-align: right;
}
 
.form input,
.form textarea {
  padding: 0 5px;
  width: 100%;
}
 
.form button {
  padding: 10px 20px;
  width: 50%;
  max-width: 120px;
}
 
.form input {
  height: 40px;
}
 
.form textarea {
  height: 220px;
}

小提示:这里我们的背景色用到了 linear-gradient() 线性渐变,实现了一个漂亮的颜色渐变背景。还有一个 CSS3 语法需要关注下:hue-rotate,色调旋转滤镜,方便我们改变当前的颜色。

四、使用CSS选择器,实现表单面板的切换和隐藏

我们通过点击 checkbox 对应的 label 标签进行切换和显示留言面板,这里我们用到了 :checked 伪类,以及 ~(后续同胞选择器)和 +(紧邻同胞选择器),辅助元素的选择进行样式变换,示例代码如下:

[type="checkbox"]:checked + .feedback-label {
  transform: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1));
}
 
[type="checkbox"]:focus + .feedback-label {
  outline: 2px solid rgb(77, 144, 254);
}
 
[type="checkbox"]:checked ~ .form {
  transform: translate(0, -50%);
}
 
.feedback-label,
.form {
  transition: all 0.35s ease-in-out;
}

这里有几个样式规则我们需要聊一下:

  1. translate(50%, calc((var(--form-width) + 100%) * -1)); 这个样式是不是有些复杂,其实也不难,就是多加了一个表单面板的宽度,由于旋转后,y轴变成了水平轴,向左移动相当Y轴往上移动,因此是负值,需要乘-1。
  2. 第二个选择器,我们之所以加个选中后的 outline 轮廓属性,主要是为了方便那些习惯键盘操作的用户,当其使用 Tab 键选择 feedback label元素时,然后再使用 Space 空格键就能很方便的打开留言面板进行切换。
  3. 第三个选择器,我们使用 transform: translate(0, -50%); 将 X 轴更改成0,恢复成最开始的位置,这样我们的留言面板内容就能显示出来。

处理响应式问题

最后,特别重点提示下我们做页面要考虑页面响应式适配的问题,这里我们需要针对手机设备做一些样式的调整,比如更改表单面板的宽度由原来的 500px 调整到 320px,以及初始字体的大小,调整成16px。

最终添加的响应式代码如下:

/*CUSTOM VARIABLES HERE*/
 
@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
 
  .form {
    padding: 15px;
    width: var(--form-mob-width);
  }
 
  form div:not(:last-child) {
    margin-bottom: 10px;
  }
 
  [type="checkbox"]:checked + .feedback-label {
    transform: rotate(-90deg) translate(50%, calc((var(--form-mob-width) + 100%) * -1));
  }
}

小节

好了,到这里,我们的案例就全部完成了,你可以欣赏下自己完成的杰作啦,实现起来是不是很简单呢,最后我还是建议大家还是亲自动手实践一遍,这样才能加深对本案例用到的CSS属性的理解。

最终完成的效果,大家可以点击以下网址进行在线体验:

https://www.qianduandaren.com/demo/feedback/

今天的内容就和大家分享到这里,感谢你的阅读,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,后续会持续分享 CSS 常用案例和技巧,欢迎持续关注。

延伸阅读

基础章节:这30个CSS选择器,你必须熟记(上)

基础章节:这30个CSS选择器,你必须熟记(中)

基础章节:这30个CSS选择器,你必须熟记(下)

使用 CSS Checkbox Hack 技术制作一个手风琴组件

击右上方红色按钮关注“web秀”,让你真正秀起来

前言

随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的问题。

如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

如果您对CSS比较陌生,看看这篇文章CSS选择器如此之多,你了解多少?

1、使用CSS重置(reset)

css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin、padding改变浏览器默认的盒模型。

*{ 
 box-sizing:border-box; 
 margin:0; 
 padding:0 
}

使用box-sizing声明是可选择,如果你使用下面继承的盒模型形式可以跳过它

2、继承盒模型

让盒模型从html 继承:

html { 
 box-sizing: border-box; 
} 
*, *:before, *:after { 
 box-sizing: inherit; 
}

3、使用flexbox布局来避免margin的问题 (Get Rid of Margin hacks width Flexbox)

当你多少次试着去设计栅格布局如:组合或者图片画廊,如果使用浮动的方式,那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题 ,可以使用flexbox 的space-between 属性值

.flex-container{ 
 display:flex; 
 justify-content:space-between; 
} 
.flex-container .item{ 
 flex-basis:23%; 
}

4、使用:not() 解决lists边框的问题

在web设计中,我们通常使用:last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单,通过使用borders 来给每个链接Link创建分割符,然后再在加上一条规则 解除最后一个link的border

.nav li { 
 border-right: 1px solid #666; 
} 
.nav li:last-child { 
 border-right: none; 
}

这是一种很混乱的方式,它不仅强制浏览器以一种方式渲染,然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而,最重要的是,我们可以通过使用:not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式:

.nav li:not(:last-child) { 
 border-right: 1px solid #666; 
}

上面就是,除了最后一个li以外,所有的 .nav li 都加上了border样式,是不是很简单! 当然,你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 :not是更有语义化(semantic)和容易理解的。

如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

5、body上加入line-height样式

导致低样式效率(inefficient stylesheets)的一件事就是不断的重复声明。最好是做下项目规划和组合规则,这样CSS会更流畅。实现这一点,就需要我们理解级联(cascade),以及如何在通用选择器写的样式可以继承在其他地方。行间距(line-height)可以作为 给你的整个项目设置的一个属性,不仅可以减小代码量,而且可以让你的网站的样式给一个标准的外观

body { 
 line-height: 1.5; 
}

请注意,这里的声明没有单位,我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍

6、垂直居中任何元素 (vertical-center anything)

在没有准备使用CSSGrid 布局的时候,设置垂直居中布局的全局规则是一个很好的方式,可以为优雅(elegantly)的设置内容布局奠定一个基础

html, body { 
 height: 100%; 
 margin: 0; 
} 
body { 
 -webkit-align-items: center; 
 -ms-flex-align: center; 
 align-items: center; 
 display: -webkit-flex; 
 display: flex; 
}

这15种CSS居中的方式,你都用过哪几种?

7、使用SVG icons

SVG使用于所有分辨类,并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样:

.logo { 
 background: url("logo.svg"); 
}

温馨提示:如果将SVG用在可交互的元素上比如说button,SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到(确保在HTML中已设置适当的aria属性)

.no-svg .icon-only:after { 
 content: attr(aria-label); 
}

如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

8、使用 “OWL选择器”

使用通用选择器(universal selector)* 和相邻的兄弟选择器(adjacent sibling selector)+ 可以提供一个强大的的CSS功能,给紧跟其他元素中的文档流中的所有元素设置统一的规则

* + * { 
 margin-top: 1.5rem; 
}

这是一个很棒的技巧,可以帮你创建更加均匀的类型跟间距。在上面的列子中,跟在其他元素后面的元素,比如说H3后面的H4,或者一个段落之后的一个段落,他们之间至少1.5rems的间距(大约为30px)

9、一致的垂直结构(Consistent Vertical Rhythm)

一致的垂直节奏提供了一种视觉美学,使内容更具可读性。如果owl选择器过于通用,请在元素内使用通用选择器(*)为布局的特定部分创建一致的垂直节奏:

.intro > * { 
 margin-bottom: 1.25rem; 
}

10、对更漂亮的换行文本使用 box-decoration-break

假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色,但不希望整个段落或标题看起来像一个大块。Box Decoration Break属性允许您仅对文本应用样式,同时保持填充和页边距的完整性。如果要在悬停时应用突出显示,或在滑块中设置子文本样式以具有突出显示的外观,则此功能尤其有用:

.p { 
 display: inline-block; 
 box-decoration-break: clone; 
 -o-box-decoration-break: clone; 
 -webkit-box-decoration-break: clone; 
}

内联块声明允许将颜色、背景、页边距和填充应用于每行文本,而不是整个元素,克隆声明确保将这些样式均匀地应用于每行。

11、等宽表格单元格

表格可能很难处理,所以尝试使用table-layout:fixed来保持单元格相等宽度:

.calendar { 
 table-layout: fixed; 
}

如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

12、强制使用属性选择器显示空链接

这对于通过CMS插入的链接特别有用,CMS通常不具有类属性,并帮助您在不影响级联的情况下对其进行特定样式设置。例如,<a>元素没有文本值,但href属性有一个链接:

a[href^="http"]:empty::before { 
 content: attr(href); 
}

13、样式“默认”链接

说到链接样式,您可以在几乎每个样式表中找到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则,并且在使用像WordPress这样的CMS时,可能会导致您的主链接样式比按钮文本颜色更容易出现问题。尝试这种较少干扰的方式为“默认”链接添加样式:

a[href]:not([class]) { 
 color: #999; 
 text-decoration: none; 
 transition: all ease-in-out .3s;
}

14、比率框

要创建具有固有比率的框,您需要做的就是将顶部或底部填充应用于div:

.container { 
 height: 0; 
 padding-bottom: 20%; 
 position: relative; 
} 
.container div { 
 border: 2px dashed #ddd; 
 height: 100%; 
 left: 0; 
 position: absolute; 
 top: 0; 
 width: 100%; 
}

使用20%进行填充使得框的高度等于其宽度的20%。无论视口的宽度如何,子div都将保持其纵横比(100%/ 20%= 5:1)。

如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

15、风格破碎的图像

这个技巧不是关于代码缩减,而是关于细化设计细节的。破碎的图像发生的原因有很多,要么不雅观,要么导致混乱(只是一个空元素)。用这个小小的CSS创建更美观的效果:

img { 
 display: block; 
 font-family: Helvetica, Arial, sans-serif; 
 font-weight: 300; 
 height: auto; 
 line-height: 2; 
 position: relative; 
 text-align: center; 
 width: 100%; 
} 
img:before { 
 content: "We're sorry, the image below is missing :("; 
 display: block; 
 margin-bottom: 10px; 
} 
img:after { 
 content: "(url: " attr(src) ")"; 
 display: block; 
 font-size: 12px; 
}

16、使用rem进行全局大小调整;使用em进行局部大小调整

在设置根目录的基本字体大小后,例如html字体大小:15px;,可以将包含元素的字体大小设置为rem:

article { 
 font-size: 1.25rem; 
} 
aside { 
 font-size: .9rem; 
}

然后将文本元素的字体大小设置为em

h2 { 
 font-size: 2em; 
} 
p { 
 font-size: 1em; 
}

现在,每个包含的元素都变得分区化,更易于样式化、更易于维护和灵活。

web开发中该用 em 还是 rem 呢?

如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

17、隐藏未静音的自动播放视频

当您处理无法从源代码轻松控制的内容时,这对于自定义用户样式表来说是一个很好的技巧。这个技巧将帮助您避免在加载页面时自动播放视频中的声音干扰访问者,并再次提供了精彩的:not()伪选择器:

video[autoplay]:not([muted]) { 
 display: none; 
}

18、灵活运用root类型

响应布局中的字体大小应该能够自动调整到视区,从而保存编写媒体查询的工作,以处理字体大小。可以使用:not和视区单位,根据视区高度和宽度计算字体大小:

:root { 
 font-size: calc(1vw + 1vh + .5vmin); 
}

现在,您可以使用根em单位,该单位基于:not:

body { 
 font: 1rem/1.6 sans-serif; 
}

结合上面的rem/em技巧以获得更好的控制。有关管理Safari旧版本的提示,请参阅CSS Fix for iOS VH Unit Bug。

19、在表单元素上设置字体大小,以获得更好的移动体验

为了避免移动浏览器(iOS Safari等)在点击<select>下拉列表时放大HTML表单元素,请在添加font-size样式:

input[type="text"], 
input[type="number"], 
select, 
textarea { 
 font-size: 16px; 
}

20、CSS变量

最后,最强大的CSS级别来自于CSS变量,它允许您声明一组公共属性值,这些值可以通过样式表中任何位置的关键字重用。你可能有一套颜色在整个项目中使用,以保持一致性。在CSS中反复重复这些颜色值不仅是件烦人的事情,而且还容易出错。如果某个颜色在某个时刻需要改变,你就不得不去寻找和替换,这是不可靠或不快速的,当为最终用户构建产品时,变量使得定制变得容易得多。例如:

如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

:root { 
 --main-color: #06c; 
 --accent-color: #999; 
} 
 
h1, h2, h3 { 
 color: var(--main-color); 
} 
a[href]:not([class]), 
p, 
footer span{ 
 color: var(--accent-color); 
}

公告

喜欢小编的点击关注,了解更多知识!

何保持页面样式基本不变的前提下将HTML页面导出为PDF,下面提供一些示例代码,纯属个人原创,如对你有帮助请记得加关注、加收藏、点赞、转发、分享~谢谢~~

  • 基本思路:保持页面样式基本不变,使用 `html2canvas` 将页面转换为图片,然后再通过 `jspdf` 将图片分页导出为PDF文件(中间会遇到图片或文字等内容在分页处被切割开的问题,如何解决了?详见末尾干货)
  • 上基础代码:下面为项目中实际代码截取
<div>
    <!-- 要打印的内容区 -->
    <div ref="contentRef">
        <div class="print-item print-out-flow">这是脱离文档流的内容区域</div>
        <div class="print-item">这是一行内容,也是最小叶子元素内容</div>
    </div>
    <!-- 打印内容容器 -->
    <div ref="printContainerRef" class="print-container"></div>
</div>
/**
  * 1.使用一个隐藏div装载有滚动条的div.innerHTML
  * 2.隐藏div使用position: absolute, z-index: -999, left: -9999px, width: 900px 控制让用户无感知
  * 3.根据需要覆写隐藏div内html样式(例如textarea多行显示有问题, 可以新增一个隐藏的div
  *    包裹textarea的绑定值, 然后在打印样式中覆写样式, 隐藏textarea并显示对应div)
  */
handleExport() {
   // 下面是VUE组件内获取DOM元素代码,将内容放置到打印区(定义的隐藏DIV)中
    const contentRef = this.$refs.contentRef as HTMLElement;
    const printContainerRef = this.$refs.printContainerRef as HTMLElement;
    // 打印区的需额外处理绝对定位值, 调整使得第一个元素的.top值为0, 以便于页面计算
    printContainerRef.innerHTML = contentRef.innerHTML;	
    
    // 所有叶子div元素加上 print-item 样式名, 脱离文档流的额外添加 print-out-flow
    handlePrintItem(printContainerRef);  // 解决多页内容可能被切割问题
    
    html2canvas(printContainerRef, {allowTaint: false, useCORS: true}).then((canvas: any) => {
      const contentHeight = canvas.height;
      const contentWidth = canvas.width;
      // pdf每页显示的内容高度
      const pageHeight = contentWidth / 595.28 * 841.89;
      // 未生成pdf的页面高度
      let offsetHeight = contentHeight;
      // 页面偏移值
      let position = 0;
      // a4纸的尺寸[595.28, 841.89], canvas图片按a4纸大小缩放后的宽高
      const imgWidth = 595.28;
      const imgHeight = 595.28 / contentWidth * contentHeight;

      const dataURL = canvas.toDataURL('image/jpeg', 1.0);
      const doc = new jsPDF('p', 'pt', 'a4');

      if (offsetHeight < pageHeight) {
        doc.addImage(dataURL, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (offsetHeight > 0) {
          doc.addImage(dataURL, 'JPEG', 0, position, imgWidth, imgHeight);
          offsetHeight -= pageHeight;
          position -= 841.89;

          if (offsetHeight > 0) {
            doc.addPage();
          }
        }
      }

      doc.save(this.generateReportFileName());
      printContainerRef.innerHTML = '';
    });
}

上干货代码:上面分页导出PDF可能网上能看到类型代码,但绝对找不到下面的代码,纯手搓解决分页元素被切开问题(思路:获取自身定位,如自己刚好在被分页处,则加上一定的margin-top值将内容向下移)

/** 
 * 处理打印元素项, 修复分页后被切割的元素
 * @param printContainerRef 打印内容div容器
 * @param itemClassName 打印最小元素标识类名
 * @param outFlowClassName 脱离文档流的元素标识类名
 */
export function handlePrintItem(
  printContainerRef: HTMLElement,
  itemClassName: string = 'print-item',
  outFlowClassName: string = 'print-out-flow'
): void {
  const rootClientRect = printContainerRef.getBoundingClientRect();
  // 初始化页面相关数据
  const totalHeight = rootClientRect.height;  // 内容总高度
  const a4PageHeight = (printContainerRef.clientWidth / 595.28) * 841.89; // a4纸高度
  let pageNum = Math.ceil(totalHeight / a4PageHeight);  // 总页数
  let addPageHeight = 0;  // 修正被分割元素而增加的页面高度总和
  let currentPage = 1;  // 当前正在处理切割的页面
  const splitItemObj: { [key: number]: HTMLElement[] } = {};  // 内容中各页被切割元素存储对象

  const printItemNodes: NodeListOf<HTMLElement> = printContainerRef.querySelectorAll(`.${itemClassName}`);
  for (let item of printItemNodes) {
    // 如果当前页已经是最后一页, 则中断判断
    if (currentPage >= pageNum) {
      break;
    }

    // 获取元素绝对定位数据
    const clientRect = item.getBoundingClientRect();
    let top = clientRect.top;
    const selfHeight = clientRect.height;
    // 如果当前元素距离顶部高度大于当前页面页脚高度, 则开始判断下一页页脚被切割元素
    if (top > currentPage * a4PageHeight) {
      // 换页前修正上一页被切割元素
      addPageHeight += fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
      pageNum = Math.ceil((totalHeight + addPageHeight) / a4PageHeight);
      top = item.getBoundingClientRect().top;
      currentPage++;
    }
    // 如果元素刚好处于两页之间, 则记录该元素
    if (top > (currentPage - 1) * a4PageHeight && top < currentPage * a4PageHeight && top + selfHeight > currentPage * a4PageHeight) {
      if (!splitItemObj[currentPage]) {
        splitItemObj[currentPage] = [];
      }
      splitItemObj[currentPage].unshift(item);
      // 如果当前元素是最后一个元素, 则直接处理切割元素, 否则交由处理下一页元素时再处理切割
      if (item === printItemNodes[printItemNodes.length - 1]) {
        fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
      }
    }
  }
}

/**
  * 修复当前页所有被切割元素
  * @param currentPage 当前页
  * @param pageHeight 每页高度
  * @param splitElementItems 当前被切割元素数组
  * @param outFlowClassName 脱离文档流的样式类名
  */
function fixSplitItems(
  currentPage: number,
  pageHeight: number,
  splitElementItems: HTMLElement[],
  outFlowClassName: string
): number {
  if (!splitElementItems || !splitElementItems.length) {
    return 0;
  }

  const yMargin = 5;  // y方向距离页眉的距离
  const splitItemsMinTop = getSplitItemsMinTop(splitElementItems);
  if (!splitItemsMinTop) {
    return 0;
  }

  let fixHeight = currentPage * pageHeight - splitItemsMinTop + yMargin;
  const outFlowElement = splitElementItems.find((item) => item.classList.contains(outFlowClassName));
  if (outFlowElement && outFlowElement.parentElement) {
    const parentPreviousElement = outFlowElement.parentElement.previousElementSibling as HTMLElement;
    fixHeight += getMarinTopNum(parentPreviousElement, outFlowElement.parentElement);
    outFlowElement.parentElement.style.marginTop = `${fixHeight}px`;
    return fixHeight;
  }

  splitElementItems.forEach((splitElement) => {
    splitElement.style.marginTop = `${fixHeight}px`;
  });
  return fixHeight;
}

/**
  * 获取被切割元素数组中最小高度值(如一行有多个元素被切割,则选出距离顶部最小的高度值)
  * @param splitElementItems 当前被切割元素数组
  */
function getSplitItemsMinTop(
  splitElementItems: HTMLElement[]
): number | undefined {
  // 获取元素中最小top值作为基准进行修正
  let minTop: number | undefined;
  let minElement: HTMLElement | undefined;
  splitElementItems.forEach((splitElement) => {
    let top = splitElement.getBoundingClientRect().top;
    if (minTop) {
      minTop = top < minTop ? top : minTop;
      minElement = top < minTop ? splitElement : minElement;
    } else {
      minTop = top;
      minElement = splitElement;
    }
  });

  // 修正当前节点及其前面同层级节点的margin值
  if (minTop && minElement) {
    const previousElement = splitElementItems[splitElementItems.length - 1].previousElementSibling as HTMLElement;
    minTop -= getMarinTopNum(previousElement, minElement);
  }
  return minTop;
}

/**
  * 通过前一个兄弟元素和元素自身的位置确认一个距离顶部高度修正值
  * @param previousElement 前一个兄弟元素
  * @param curElement 当前元素
  */
function getMarinTopNum(previousElement: HTMLElement, curElement: HTMLElement): number {
  let preMarginNum = 0;
  let curMarginNum = 0;
  if (previousElement) {
    // 获取外联样式需要getComputedStyle(), 直接.style时对象的值都为空
    const previousMarginBottom = window.getComputedStyle(previousElement).marginBottom;
    preMarginNum = previousMarginBottom ? Number(previousMarginBottom.replace('px', '')) : 0;
  }
  const marginTop = window.getComputedStyle(curElement).marginTop;
  curMarginNum = marginTop ? Number(marginTop.replace('px', '')) : 0;
  return preMarginNum > curMarginNum ? preMarginNum : curMarginNum;
}

以上纯原创!欢迎加关注、加收藏、点赞、转发、分享(代码闲聊站)~