SoFunction
Updated on 2025-04-03

Custom scrollbar (easyscroll) implementation method under vue framework

Add a custom scrollbar plugin:

//The plug-in uses jsx syntax, and you need to install the vue-jsx plug-in before usenpm install babel-plugin-syntax-jsx --save-dev
npm install babel-plugin-transform-vue-jsx --save-dev
npm install babel-helper-vue-jsx-merge-props --save-dev
npm install babel-preset-es2015 --save-dev
//Change the .babelrc file{
 "presets": [
  ["es2015", { "modules": false }],
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": ["transform-vue-jsx", "transform-runtime"],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}
//Installing and using plug-insnpm isntall --save easyscroll
//middleimport EasyScroll from 'easyscroll';
(EasyScroll);
//Main parameters of scroll barmyBarOption:{
 barColor:"#959595", //Scrollbar color barWidth:6, //Scrollbar width railColor:"#eee", //Rail color barMarginRight:0, //The distance unit to the right of the vertical scroll bar is (px) barMaginBottom:0,   //Horizontal scroll bar distance from bottom unit (px) barOpacityMin:0.3,   //Transparency in the non-activated state of the scroll bar zIndex:"auto",    //Scrollbar z-Index autohidemode:true,   //Automatic hidden mode horizrailenabled:true,//Whether to display horizontal scroll bar}
//Page Code<EasyScrollbar :barOption="myBarOption">
  <div>
   <div>
    content
   </div>
  </div>
</EasyScrollbar>
<script>
  data{
   return{
    data(){
     myBarOption:{
      barColor:"red"
     }
    }
   }
  }
</script>
//Background building code reference<template>
 <div >
  <router-view class="frameTop" name="top"/>
  <router-view class="frameMenu" name="menus"/>
  <EasyScrollbar class="frameMain" :barOption="myBarOption">
   <div class="organization" :style="'height:'+scrollHeight+'px'">
    <router-view></router-view>
   </div>
  </EasyScrollbar>
 </div>
</template>

<script>
export default {
 data(){
  return {
   scrollHeight: 0,     //The height of the direct child element of EasyScrollbar   myBarOption: {
    barColor:"#959595", //Scrollbar color barWidth:6, //Scrollbar width    railColor:"#eee", //Rail color barMarginRight:0, //The distance unit to the right of the vertical scroll bar is (px)    barMaginBottom:0,   //Horizontal scroll bar distance from bottom unit (px)    barOpacityMin:0.3,   //Transparency in the non-activated state of the scroll bar    zIndex:"auto",     //Scrollbar z-Index    autohidemode:true,   //Automatic hidden mode    horizrailenabled:true,//Whether to display horizontal scroll bar   }
  }
 },
 created: function() {
  ();
 },
 methods:{
  init: function() {
   //Calculate the height of the page core module during initialization and assign it to the direct child element of EasyScrollbar    = -50;
  }
 }
}

</script>

<style>
@import "./assets/css/";
@import "./assets/css/";
</style>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.