阻止?jié)L動(dòng)

內(nèi)部盒子滾動(dòng)到邊界的時(shí)候，將觸發(fā)整個(gè)頁(yè)面滾動(dòng)，可通過(guò)設(shè)置overscroll-behavior-x阻止此行為

div {
  height: 300px;
  width: 500px;
  overflow: auto;
  overscroll-behavior-x: contain;
}

使用 sroll-snap-type 優(yōu)化滾動(dòng)

在實(shí)際應(yīng)用中，應(yīng)用在全屏滾動(dòng)或banner上有很多用武之地，不需要原始的各種尺寸位置計(jì)算

ul {
    scroll-snap-type: x mandatory;
}
 
li {
    scroll-snap-align: center;
}

橫豎虛線

css自帶的虛線在某些設(shè)計(jì)場(chǎng)景下不夠用，通過(guò)linear-gradient繪制虛線。

// 橫虛線
.dashed {
  height: 1px;
  width: 100px;
 background: linear-gradient(to right, #000, #000 5px, transparent 5px, transparent);
 background-size: 10px 100%;
}

// 豎虛線
.dashed {
  background: linear-gradient(to bottom, #000, #000 3.2px,transparent 3.2px, transparent);
  background-size: 100% 10px;
  width: 1px;
  height: 100px;
}

畫格子

基于linear-gradient 漸變畫格子，格子的角度及條紋之間的間隙可自行調(diào)整。

background-image:
  linear-gradient(
    90deg, 
    rgba(52,83,139,.5) 50%, 
    transparent 50%), 
  linear-gradient(
    rgba(52,83,139,.5) 50%, 
    transparent 50%)

文本溢出顯示省略號(hào)

單行文本溢出，定義ellipsis函數(shù)方便調(diào)用

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis {
  @include ellipsis();
}

多行文本溢出，定義multi-ellipsis函數(shù)方便調(diào)用，line是對(duì)應(yīng)的行數(shù)

@mixin multi-ellipsis($line: 1) {
  @if $line <= 0 {
      $line: 1;
  }

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

.ellipsis-1 {
  @include multi-ellipsis(1);
}

.ellipsis-2 {
  @include multi-ellipsis(2);
}

禁用鼠標(biāo)事件

.disabled { 
  pointer-events: none; 
}