Vue

by kabanoki

HTML

<div id="app">
  <div class="p">  
      <vue-scroll :ops="ops">
        <p>開始</p>
        <div class="c"></div>
        <p>終了</p>
      </vue-scroll>
  </div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuescroll.min.js"></script>

CSS

#app {
  padding:20px;
}
p {
  background-color: #f00;
}
.p {
  width: 100%;
  height: 300px;
}
.c {
  width: 200%;
  height: 1600px;
  background-color: #dcdcdc;
}

Vue

const vuescroll = window.vuescroll;

Vue.use(vuescroll);

let app = new Vue({
  el: '#app',
  data: {
    ops: {
      rail: {
        opacity: '0.2',
        background: undefined,
        border: '1px solid #cecece',
        size: '15px'
      },
      bar: {
        background: '#00ff00',
        keepShow: false,
        size: '10px',
        minSize: 0.2
      },
      scrollButton: {
        enable: true,
        background: '#cecece'
      },
      scrollPanel: {
        easing: 'easeInQuad',
        speed: 800
      },
      vuescroll: {
        wheelScrollDuration: 0,
        wheelDirectionReverse: false
      }
    },
  }
});