实用而陌生的style合计

Posted 2021-05-20 当当和瓶瓶

1.滚动相关：

scroll-behavior: smooth;

element.scrollTop = intValue; 

 

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

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

滚动条样式设置

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

 

 

超出换行打点

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

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