【滚动条相关】原创

xjj前端妹_雅

发布于 2022-5-16 10:30

浏览

0收藏

前言

滚动条的样式设置属于常用但又不容易被记住，本篇文章主要用于记录滚动条样式设置相关及包含一些常用的滚动条样式兼容处理、滚动条插件等。

一、滚动条通用样式CSS

一般很难改变滚动条的高度，它是根据内容自适应计算高度。我们能做的是优化滚动条的宽度、颜色、风格等，使得其与系统风格一致。

::-webkit-scrollbar {
  	width: 9px;
  	height: 1px;
}
::-webkit-scrollbar-thumb {
  	border-radius: 10px;
 	background: rgba(106,172,246, .3);
}
::-webkit-scrollbar-track {
  	border-radius: 10px;
  	background: #f0f0f0;
}

隐藏滚动条。

::-webkit-scrollbar { //谷歌
  	display: none;
}
div {
	-ms-overflow-style: none; //ie
	scrollbar-color: transparent transparent; //火狐
}

二、滚动条兼容

1.webkit浏览器

webkit内核的浏览器有Google Chrome、Android的自带的浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、阿里云浏览器、QQ浏览器、百度PC浏览器等。：

::-webkit-scrollbar {
  width: 9px;
  height: 1px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(106,172,246, .3);
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #f0f0f0;
}

2.火狐

代码如下（示例）：

div {
   scrollbar-color:  rgba(106,172,246, .3) #f0f0f0;  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
   scrollbar-width: thin;  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
}

3.IE

div {
   	/* -ms-overflow-style: none; */
   	/* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
   	scrollbar-face-color: pink;
   	scrollBar-shadow-color: blue;
   	scrollBar-arrow-color: pink;
   	scrollBar-track-color: #f0f0f0;
 }

三、整体写法

包含兼容写法

//谷歌
::-webkit-scrollbar {
  	width: 9px;
  	height: 1px;
}
::-webkit-scrollbar-thumb {
  	border-radius: 10px;
 	background: rgba(106,172,246, .3);
}
::-webkit-scrollbar-track {
  	border-radius: 10px;
  	background: #f0f0f0;
}
//火狐
div {
   scrollbar-color:  rgba(106,172,246, .3) #f0f0f0;  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
   scrollbar-width: thin;  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
}
//IE
div {
 	/* -ms-overflow-style: none; */
 	/* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
 	scrollbar-face-color: pink;
 	scrollBar-shadow-color: blue;
 	scrollBar-arrow-color: pink;
 	scrollBar-track-color: #f0f0f0;
}

四、vue常用滚动条插件

1.vuescroll

官网 <a href=“https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#vuescroll” target=“_blank”>https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#vuescroll</a>

能够自定义滚动条样式。
能够支持上拉-刷新，下拉-加载。
支持轮播图。
支持平滑地滚动，并且可以设置不同的滚动动画。
支持检测内容大小发生变化并反馈给用户。
支持typescript，SSR(服务端渲染)。
由于是 Vue 插件，对 Vue 用户十分友好。
丰富的 Api，事件帮助你完成各种复杂的功能。

yarn add vuescroll
// 1、全局引入
import Vue from 'vue';
import vuescroll from 'vuescroll';
Vue.use(vuescroll, {
  ops: {}, // 在这里设置全局默认配置
  name: 'myScroll' // 在这里自定义组件名字，默认是vueScroll
});

//2、局部引入
<template>
  <vuescroll> <!-- 你的内容... --> </vuescroll>
</template>
<script>
  import vuescroll from 'vuescroll';
  export default {
    components: {
      vuescroll
    }
  };
</script>

2.vue-happy-scroll

Demo <a href=“https://tangdaohai.github.io/vue-happy-scroll/” target=“_blank”>https://tangdaohai.github.io/vue-happy-scroll/</a>
注：不支持移动端

保留原生滚动条功能
支持动态设置滚动条颜色
支持设置滚动条的位置。左右(竖向滚动条)、上下(横向滚动)方向
支持隐藏滚动条
支持动态设定滚动位置，并支持top与left值同步
支持动态数据resize，滚动条自动隐藏与显示
支持设置resize滚动条变化规则(e. 在chart应用中，来新消息时，滚动条始终在最底部)

npm i -D vue-happy-scroll

全局注册

<template>
 <happy-scroll>
   <!-- 你的内容 -->
 </happy-scroll>
</template>
<script>
 import Vue from 'vue'

 import HappyScroll from 'vue-happy-scroll'
 // 引入css
 import 'vue-happy-scroll/docs/happy-scroll.css'
 Vue.use(HappyScroll)

 //或者
 import { HappyScroll } from 'vue-happy-scroll'
 //自定义组件名
 Vue.component('happy-scroll', HappyScroll)
</script>

局部注册

<template>
 <happy-scroll>
   <!-- 你的内容 -->
 </happy-scroll>
</template>
<script>
 import { HappyScroll } from 'vue-happy-scroll'
 // 引入css，推荐将css放入main入口中引入一次即可。
 import 'vue-happy-scroll/docs/happy-scroll.css'
 export default {
     name: '',
     components: {HappyScroll} //在组件内注册
 }
</script>

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签