其他分享
首页 > 其他分享> > 实用而陌生的style合计

实用而陌生的style合计

作者:互联网

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;
}

 

标签:滚动条,style,实用,intValue,scrollTop,webkit,陌生,line,overflow
来源: https://www.cnblogs.com/dangdanghepingping/p/14788354.html