# CSS
- 上下居中
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
1
2
3
4
5
2
3
4
5
- 单行文本、多行文本
.text_one_line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
}
.text_multi_line {
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 吸顶
// 注意：上层不能设置overflow:hidden
.sticky {
position: sticky;
position: -webkit-sticky;
}
1
2
3
4
5
6
2
3
4
5
6
- 隐藏滚动条
.node::-webkit-scrollbar {
display: none;
}
1
2
3
2
3
- 分tab
<div className={`${activeTab === 1 ? '' : styles.hidden}`}>{tab1}</div>
<div className={`${activeTab === 2 ? '' : styles.hidden}`}>{tab2}</div>
.hidden {
display: none;
visibility: hidden;
opacity: 0;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# js
- 滚动到指定区域
Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
const element = document.getElementById("box");
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
1
2
2