实用而陌生的style合计

1.滚动相关：

scroll-behavior: smooth;

element.scrollTop = intValue; 

 

结合scrollTop使用，实现丝滑滑动，注意是element.scrollTop = intValue;而不是element.style.scrollTop = 'xxpx'；
intValue的单位是px；

 <div   //外层container高度是100px；在该父元素上设置scroll-behavior:smooth;并且用js控制scrollTop可以丝滑的滚动。
    class="bloglist-container"
    v-vLoading="loadingFlag"
    ref="blogListContainer"
  >
    <ul class="bloglist"> //内层内容区高度很大，大于100px
      <li v-for="item in data.rows" :key="item.id">
        <div class="img" v-if="item.thumb">
          <a href="">
            <img :src="item.thumb" :alt="item.title" :title="item.title" />
          </a>
        </div>
    </li>
 </div>

滚动条样式设置

//less，滚动条宽度默认4px
.overbar(@barWidth:4px){
  overflow-y: auto;
  &::-webkit-scrollbar {
     @barWidth; /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
    background: @gray;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 100px; /* 滚动条滑块长度 */
    background-color: @lightWords;
  }
}

 滚动条逻辑：(以下三个属性都是父元素的属性，即子元素很高，父元素高度固定，父元素有滚动条的情况下)

1， scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度；

2. scrollTop : 即可读，也可写，表示滚动距离，scrollTop 可以被设置为任何不带单位的整数值；

3. clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

如果元素滚动到底，下面等式返回true，没有则返回false.

element.scrollHeight - element.scrollTop === element.clientHeight

超出换行打点

// less写法，超出一行打点

.overline(@line:1){
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: @line;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}