【前端实践系列之一】有审美的前端，滚动条太丑怎么行？-一一网

这是我参与更文挑战的第1天，活动详情查看：更文挑战 !

?概论

要论影响页面美观性的浏览器硬伤，滚动条绝对榜上有名：

滚动条侵略页面空间；
滚动条难以融入整体页面样式环境；
动态内容加载使得页面出现滚动条市，会产生抖动现象；
各浏览器的滚动条表现并不一致。

下图依次为：IE、Firefox、Chrome与Edge。
复制代码

如果用css的scrollbar的相关属性处理，各种兼容性问题又会层出不穷，现成的scroll库便成了不二之选。

?Vuescroll.js

vuescroll.js是vue框架下一款不错的滚动库，它除了可以实现自定义滚动条样式之外，还可以实现下拉加载、懒加载、锚点定位等诸多功能，吐血推荐。?

?基本介绍

?安装模块

npm i vuescroll
#or
yarn add vuescroll
复制代码

?局部引入

?使用要点如下注释。引入后无需其他配置，效果即现（此时为默认样式）。

<template>
  <div class="outerBox">
   <!-- vuescroll组件介于两者之间 -->
    <vuescroll :ops="ops">
      <!-- 如下为会超出outer的内容 -->
      <div class="innerBox" v-for="(item, index) in Array(100).fill('我要产生滚动条')" :key="item">
        {{ item }}
      </div>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'//懒得区分引入
// import vuescroll from 'vuescroll/dist/vuescroll-slide';//移动端引入
// import vuescroll from 'vuescroll/dist/vuescroll-native';//web端引入

  export default {
    components: {vuescroll},//引入组件
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.outerBox {
  width: 500px;
  height: 200px; //外层盒子记得定高
  margin: 50px auto;
  border: 1px solid black;
  overflow: hidden;//外层盒子隐藏原生滚动条

  .innerBox {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid red;
    &:first-child {
      border-top: none;
    }
  }
}
</style>
复制代码

亦可全局挂载，看个人喜好（具体方法此处不做介绍）。

–引用前：

–引用后：

?样式配置

?让我门再来看看配置项：

<template>
  <div class="outerBox">
    <!-- 组件上绑定配置属性ops -->
    <vuescroll :ops="ops">
      <div class="innerBox" v-for="(item, index) in Array(100).fill('我要产生滚动条')" :key="item">
        {{ item }}
      </div>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'; 

export default {
  components: {
    vuescroll,
  },
  data() {
    return {
      //data中定义ops
      ops: {
        //轨道配置
        rail: {
          background: '#000', //颜色
          opacity: 0.1, //透明度
          size: '8px', //宽度
          specifyBorderRadius: '4', //圆角大小
          gutterOfEnds: '10px', //短边距容器的距离（默认轨道是细长情况下）
          gutterOfSide: '0px', //长边距容器的距离（默认轨道是细长情况下）
          keepShow: true, //是否永远展示轨道，即使内容产生滚动条
          border: '2px', //轨道边框
        },
        //滚动条配置
        bar: {
          onlyShowBarOnScroll: false, //是否只在滚动时显示滚动条
          showDelay: 500, //隐藏滚动条的时机，单位ms(keepShow为true时不生效)
          keepShow: true, //是否一致显示滚动条
          background: 'red', //颜色
          opacity: 1, //透明度
          specifyBorderRadius: false,
          minSize: false, //最小长度
          size: '10px', //长度
          disable: false, //是否禁用
        },
        //滚动按钮配置
        scrollButton: {
          enable: true,//是否启用 scrollButton
          background: 'green',//颜色
          opacity: 1,//透明度
          step: 180,//步进距离
          mousedownStep: 30,//长按状态下滚动的距离
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
··· ···
</style>
复制代码

–配置效果：

?常用事件&API

?用法

//绑定事件及组件ref
<vue-scroll @handle-resize="handleResize" ref='srcoll'> </vue-scroll>

export dafault {
  ···
  methods: {
    //监听事件
    handleResize() {
      console.log('content has resized!')
    }，
    callApi(){
      //通过ref实例调用API
      this.$refs['srcoll'].scrollTo(
        {
          x: "50%"
        }, 500
      );
    }
  }
  ···
复制代码

? handle-resize：此事件当内容尺寸发生变化时即会触发，可搭配JS实现长页面的懒加载。

? handle-scroll-complete：此事件当滚动完成时触发。

? scrollTo：此Api可使页面滚动至指定位置，可搭配实现锚点切换。

? scrollBy：此Api可使页面滚动指定距离。

? scrollIntoView：此Api可使页面滚动至内部指定子元素位置，可搭配实现返回顶部。