|
7 | 7 | <meta name="description" content=""> |
8 | 8 |
|
9 | 9 |
|
10 | | - <link rel="preload" href="/vue-custom-scrollbar/assets/css/0.styles.b075adcd.css" as="style"><link rel="preload" href="/vue-custom-scrollbar/assets/js/app.3a68f57d.js" as="script"><link rel="preload" href="/vue-custom-scrollbar/assets/js/5.f7209ce5.js" as="script"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/2.da42264c.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/3.7b364f08.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/4.134216c8.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/6.75c9d241.js"> |
| 10 | + <link rel="preload" href="/vue-custom-scrollbar/assets/css/0.styles.b075adcd.css" as="style"><link rel="preload" href="/vue-custom-scrollbar/assets/js/app.ef5bfea1.js" as="script"><link rel="preload" href="/vue-custom-scrollbar/assets/js/5.f7209ce5.js" as="script"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/2.da42264c.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/3.7b364f08.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/4.134216c8.js"><link rel="prefetch" href="/vue-custom-scrollbar/assets/js/6.75c9d241.js"> |
11 | 11 | <link rel="stylesheet" href="/vue-custom-scrollbar/assets/css/0.styles.b075adcd.css"> |
12 | 12 | </head> |
13 | 13 | <body> |
14 | | - <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-custom-scrollbar/" class="home-link router-link-exact-active router-link-active"></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><!----> <!----> </div> <div class="page"> <div class="content"><h1 id="vue-custom-scrollbar"><a href="#vue-custom-scrollbar" aria-hidden="true" class="header-anchor">#</a> vue-custom-scrollbar</h1> <p>Minimalistic but perfect custom scrollbar component for Vue.JS(using <a href="https://github.com/utatti/perfect-scrollbar" target="_blank" rel="noopener noreferrer">utatti/perfect-scrollbar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</p> <h2 id="why-custom-scrollbar"><a href="#why-custom-scrollbar" aria-hidden="true" class="header-anchor">#</a> Why custom scrollbar</h2> <p>As you know, Chrome support custom scrollbar, but Firefox don't support it, if you want your website perfect, please use this component~</p> <h2 id="why-vue-custom-scrollbar"><a href="#why-vue-custom-scrollbar" aria-hidden="true" class="header-anchor">#</a> Why vue-custom-scrollbar?</h2> <p>vue-custom-scrollbar is minimalistic but perfect scrollbar component for Vue.JS.</p> <ul><li>No change on design layout</li> <li>No manipulation on DOM tree</li> <li>Use plain <code>scrollTop</code> and <code>scrollLeft</code></li> <li>Scrollbar style is fully customizable</li> <li>Efficient update on layout change</li></ul> <h1 id="demo"><a href="#demo" aria-hidden="true" class="header-anchor">#</a> Demo</h1> <!----> <h2 id="install"><a href="#install" aria-hidden="true" class="header-anchor">#</a> Install</h2> <h4 id="npm"><a href="#npm" aria-hidden="true" class="header-anchor">#</a> npm</h4> <p>The best way to install and use vue-custom-scrollbar is with npm or yarn. It's registered |
| 14 | + <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-custom-scrollbar/" class="home-link router-link-exact-active router-link-active"></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/Binaryify/vue-custom-scrollbar" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
| 15 | + GitHub |
| 16 | + <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/Binaryify/vue-custom-scrollbar" target="_blank" rel="noopener noreferrer" class="nav-link external"> |
| 17 | + GitHub |
| 18 | + <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <!----> </div> <div class="page"> <div class="content"><h1 id="vue-custom-scrollbar"><a href="#vue-custom-scrollbar" aria-hidden="true" class="header-anchor">#</a> vue-custom-scrollbar</h1> <p>Minimalistic but perfect custom scrollbar component for Vue.JS(using <a href="https://github.com/utatti/perfect-scrollbar" target="_blank" rel="noopener noreferrer">utatti/perfect-scrollbar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</p> <h2 id="why-custom-scrollbar"><a href="#why-custom-scrollbar" aria-hidden="true" class="header-anchor">#</a> Why custom scrollbar</h2> <p>As you know, Chrome support custom scrollbar, but Firefox don't support it, if you want your website perfect, please use this component~</p> <h2 id="why-vue-custom-scrollbar"><a href="#why-vue-custom-scrollbar" aria-hidden="true" class="header-anchor">#</a> Why vue-custom-scrollbar?</h2> <p>vue-custom-scrollbar is minimalistic but perfect scrollbar component for Vue.JS.</p> <ul><li>No change on design layout</li> <li>No manipulation on DOM tree</li> <li>Use plain <code>scrollTop</code> and <code>scrollLeft</code></li> <li>Scrollbar style is fully customizable</li> <li>Efficient update on layout change</li></ul> <h1 id="demo"><a href="#demo" aria-hidden="true" class="header-anchor">#</a> Demo</h1> <!----> <h2 id="install"><a href="#install" aria-hidden="true" class="header-anchor">#</a> Install</h2> <h4 id="npm"><a href="#npm" aria-hidden="true" class="header-anchor">#</a> npm</h4> <p>The best way to install and use vue-custom-scrollbar is with npm or yarn. It's registered |
15 | 19 | as <a href="https://www.npmjs.com/package/vue-custom-scrollbar" target="_blank" rel="noopener noreferrer">vue-custom-scrollbarr<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>.</p> <div class="language- extra-class"><pre class="language-text"><code>$ npm install vue-custom-scrollbar |
16 | 20 | </code></pre></div><div class="language- extra-class"><pre class="language-text"><code>$ yarn add vue-custom-scrollbar |
17 | 21 | </code></pre></div><h2 id="caveats"><a href="#caveats" aria-hidden="true" class="header-anchor">#</a> Caveats</h2> <p>vue-custom-scrollbar emulates some scrolls, but not all of the kinds. It also <em>does not</em> work |
|
78 | 82 | <a href="https://github.com/utatti/perfect-scrollbar/wiki/Caveats" target="_blank" rel="noopener noreferrer">Caveats<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> too.</p> <p>IE<11 is not supported, and patches to fix problems in IE<=10 will not be |
79 | 83 | accepted. When old IEs should be supported, please fork the project and make |
80 | 84 | modification locally.</p> <h2 id="more"><a href="#more" aria-hidden="true" class="header-anchor">#</a> More</h2> <p>please refer to <a href="https://github.com/utatti/perfect-scrollbar" target="_blank" rel="noopener noreferrer">perfect-scrollbar<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="license"><a href="#license" aria-hidden="true" class="header-anchor">#</a> License</h2> <p><a href="https://github.com/Binaryify/vue-custom-scrollbar/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">MIT<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <div class="page-edit"><!----> <!----></div> <!----> </div> <!----></div></div> |
81 | | - <script src="/vue-custom-scrollbar/assets/js/5.f7209ce5.js" defer></script><script src="/vue-custom-scrollbar/assets/js/app.3a68f57d.js" defer></script> |
| 85 | + <script src="/vue-custom-scrollbar/assets/js/5.f7209ce5.js" defer></script><script src="/vue-custom-scrollbar/assets/js/app.ef5bfea1.js" defer></script> |
82 | 86 | </body> |
83 | 87 | </html> |
0 commit comments