前端常见代码片段

# CSS

上下居中

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

1
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

吸顶

// 注意：上层不能设置overflow:hidden
.sticky {
  position: sticky;
  position: -webkit-sticky;
}

1
2
3
4
5
6

隐藏滚动条

.node::-webkit-scrollbar {
    display: none;
}

1
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

# js

滚动到指定区域

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

const element = document.getElementById("box");
element.scrollIntoView({ behavior: 'smooth', block: 'center' });

1
2