Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

vuescroll

4.9.6 • Public • Published

Vuescroll

VersionBuild Status Coverage License Download prettier

Demo

Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and every options has its default value. Just wrap the content by <vue-scroll> and a custom scrollbar will show. It supports:

Compatibility

Vuescroll's compatibility is consistent with Vue.js 2.X.

Demo

Please see Live Demo on the website.

Documentation

Please see our Guide section of the website.

Example

Copy it to a html file and run on the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script> 
    <script src="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.js"></script> 
    <link
      rel="stylesheet"
      href="https://unpkg.com/vuescroll@4.9.0-beta.15/dist/vuescroll.css"
    />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
 
      #app {
        width: 100%;
        height: 100%;
        text-align: center;
      }
 
      #parent {
        width: 400px;
        height: 400px;
        display: inline-block;
      }
 
      #child {
        width: 800px;
        height: 800px;
        background: -webkit-linear-gradient(left topredblue);
        /* Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom rightredblue);
        /* Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(bottom rightredblue);
        /* Firefox 3.6 to 15 */
        background: linear-gradient(to bottom rightredblue);
        /* 标准语法 */
      }
    </style> 
  </head>
 
  <body>
    <div id="app">
      <div id="parent">
        <vue-scroll :ops="ops"> <div id="child"></div> </vue-scroll>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          ops: {
            bar: {
              background: 'rgb(24, 144, 255)'
            },
            rail: {
              border: '1px solid #cecece',
              size: '20px'
            },
            scrollButton: {
              enable: true,
              background: '#cecece'
            }
          }
        }
      });
    </script> 
  </body>
</html>

Communication

Demo

License

MIT

install

npm i vuescroll

Downloadsweekly downloads

2,700

version

4.9.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability